Multilingualism in Next.js: Setting up i18n Routing

Multilingual Architecture in Next.js

To create an effective multi-language system in Next.js, a combined approach based on several key components is used. At its core is the file-system routing, which uses a dynamic [locale] segment in the folder structure. This allows Next.js to automatically recognize and handle URLs for different languages, such as Russian (ru) and English (en).

The central element for managing translations is the next-intl library. It allows storing all text strings in separate JSON files for each locale, such as messages/ru.json and messages/en.json. To access these translations in components, the special `useTranslations` hook is used.

For translating the URLs (slugs) of articles and other pages, a SlugMapping mechanism is used. It is a database table that links the original slug with its translated versions. This allows for unique and SEO-friendly URLs for each language version of the content. To simplify the process, translated slugs can be generated automatically using transliteration.

Step-by-Step i18n Routing Setup

Configuring multilingualism begins with defining supported languages and routing rules. This process can be broken down into several key steps to ensure the entire system functions correctly.

1. Create a configuration file. A file, for example, `i18n/routing.ts`, is created in the project. It defines all supported locales (ru, en) and sets a default locale, which will be used if the language is not specified in the URL.

1. Prepare translation files. For each language, JSON files are created in the `messages` directory. The `ru.json` and `en.json` files will contain key-value pairs, where the key is the identifier for a text string, and the value is its translation into the corresponding language.

1. Configure middleware. Middleware in Next.js plays a crucial role. It intercepts all incoming requests and analyzes the URL for a language prefix (e.g., `/ru/` or `/en/`). If the prefix is missing, the middleware automatically redirects to the URL with the default locale, ensuring a seamless user experience.

Practical Implementation: Blog and UI

Let's consider the application of this configured system on a real-world example, the Media Jet project, where multilingualism is implemented for both content and UI elements. The main task is to ensure a full translation of blog articles and all static texts on the site.

For blog articles, an `ArticleTranslation` model is used in the database. This model allows storing different versions of the same article for each language, including the title, text, and, importantly, a unique slug. When creating a Russian-language article, for example, 'Как создать QR-меню' (How to create a QR menu), the slug `kak-sozdat-qr-menyu` is generated automatically. For the English version, a separate slug `how-to-create-qr-menu` is created.

As for the interface, all text elements, from buttons to headings, are translated using the `useTranslations` hook from the next-intl library. In the component's code, this hook is called with the required key from the JSON file, and the library provides the corresponding translation for the currently active locale. This ensures full support for Russian and English throughout the application.

Routing Principles and Automatic Redirects

Properly configured routing is key to intuitive navigation and good search engine indexing. In the implemented architecture, URLs have a clear and predictable structure. For example, the Russian version of an article is available at `/ru/blog/article-slug`, and the English version is at `/en/blog/article-slug`.

A key feature of the system is automatic redirection. If a user tries to access a page without specifying a locale in the URL (e.g., `mediajet.com/blog/article-slug`), the configured middleware intercepts this request. It determines the default locale (let's say, `ru`) and redirects the user to the correct address: `mediajet.com/ru/blog/article-slug`. This eliminates content duplication and ensures link consistency.

Let's look at a clear example with the article 'How to create a QR menu'.

This approach allows search engines to clearly distinguish between language versions and helps users navigate the site easily.

Performance and SEO Optimization

For multi-language sites, not only functionality but also high performance and proper search engine optimization are critically important. Several techniques are used to achieve these goals.

First, Static Site Generation (SSG) is applied for each locale. Next.js generates separate HTML files for the Russian and English versions of the pages, which ensures maximum loading speed. For content that may be updated, such as blog articles, Incremental Static Regeneration (ISR) is used. This allows pages to be updated in the background without requiring a full site rebuild.

• Translation Caching. Translation files are cached on the server-side to minimize delays during page rendering.
• Using hreflang tags. Special `hreflang` meta tags are placed on each page to indicate to search engines the existence of alternative language versions of the same page. This helps Google and other search engines to correctly index the content and show users the most relevant version in search results.

This architecture initially supports two languages (ru, en) but is easily scalable to support ten or more languages while maintaining high performance and SEO effectiveness.