International Student Recruitment Site Development in Japan

August 21, 2025 development notes international students life in Japan job hunting part-time job search

Konnichiwork Development Log: Struggles with Multilingual Support and Authentication

Introduction

Today, we continued the development of "Konnichiwork," a job information website for international students. We focused particularly on enhancing the site's multilingual support and user authentication features, overcoming many challenges.

Key Features Implemented Today

1. Rebuilding Multilingual Support (Internationalization - i18n)

We pursued best practices for multilingual support in Next.js's App Router, migrating from the existing next-i18next to i18next, react-i18next, and next-i18n-router.

• Multilingual Routing (/[locale]/ structure): Users can now access pages in each language with a language code in the URL. The root URL (/) automatically redirects to the default language (English).
• UI String Translation: All strings displayed in the site's UI, such as headers, forms, and page titles, now switch to the selected language.
• Real-time Content Translation with Google Cloud Translation API: Job information content (job titles, company names, job descriptions, etc.) stored in the database is now translated in real-time to the user's selected language. This allows users to view job information in their own language, regardless of the database language.
• Language Switching Function: A language selection button has been placed in the header, allowing users to switch the site's display language with a single click.

2. User Authentication and Session Management

We strengthened authentication and session management to ensure users can use the site securely.

• Adding User Model: Defined a User model to store user information in the database.
• User Registration API (/api/register): Implemented an API allowing new users to register with an email address and password. Passwords are securely hashed with bcryptjs.
• Login API (/api/login): Implemented an API allowing registered users to log in. Upon successful login, sessions are managed with secure HTTP-only cookies.
• Cookie-based Session Management: Implemented utility functions such as getSession, setSession, and clearSession to efficiently manage session states.
• Protecting Job Posting Page: If an unauthenticated user attempts to access the job posting page (/post-job), they are automatically redirected to the login page.

3. Favorite Jobs Feature

Added a favorite jobs feature allowing users to save jobs they are interested in.

• Adding Database Relations: Established a many-to-many relationship between the User and Job models, allowing users to have multiple favorite jobs.
• Favorite Add/Remove API (/api/favorites/add, /api/favorites/remove): Implemented APIs to add jobs to favorites or remove them from favorites.
• Favorite Get API (/api/favorites/get): Implemented an API to retrieve the list of favorite jobs for the logged-in user.
• Star Icon Display on Job Cards: A star icon is now displayed on each job card, allowing users to add/remove from favorites by clicking.
• Display on My Page: After logging in, users can access "My Page" to view a list of their favorited jobs.

Lessons Learned and Challenges from Today's Development

• Complexity of Next.js App Router and i18n: Migrating from next-i18next to i18next/react-i18next (recommended for App Router) required more changes and debugging than expected. In particular, passing translation contexts between server and client components, and the strict behavior of Next.js's special APIs like params and headers() posed significant challenges.
• Behavior of params.locale and headers().get('cookie'): We repeatedly encountered Next.js's strict rules regarding how these APIs behave within asynchronous components. Ultimately, we resolved these issues by appropriately using await and adjusting argument passing.
• Identifying and Resolving Hydration Errors: Hydration errors caused by HTML modification by browser extensions or subtle whitespace in JSX were extremely difficult to pinpoint and took a long time to resolve.
• Limitations of replace Tool and Importance of Manual Correction: The automated replace tool sometimes failed for complex code blocks or changes in specific contexts. We re-recognized the importance of accurate manual correction in such cases.
• Managing Environment Variables and API Keys: During the integration of the Google Cloud Translation API, we reconfirmed the importance of securely managing API keys and authentication settings via the gcloud CLI.

Summary

With today's development, Konnichiwork has covered key features such as multilingual support, user authentication, and the favorite jobs feature, building a very robust foundation. Overcoming many difficult debugging sessions and finally reaching a state where all features work as expected is a significant achievement.

Konnichiwork has now evolved into a more attractive and functional service for users.