Мультиязычность в Next.js: Настройка i18n роутинга

Архитектура мультиязычности на Next.js

Для создания эффективной мультиязычной системы в Next.js применяется комбинированный подход, основанный на нескольких ключевых компонентах. В основе лежит файловая система роутинга, которая использует динамический сегмент [locale] в структуре папок. Это позволяет Next.js автоматически распознавать и обрабатывать URL-адреса для разных языков, таких как русский (ru) и английский (en).

Центральным элементом для управления переводами выступает библиотека next-intl. Она позволяет хранить все текстовые строки в отдельных JSON-файлах для каждой локали, например, messages/ru.json и messages/en.json. Для доступа к этим переводам в компонентах используется специальный хук useTranslations.

Для перевода URL-адресов (slugs) статей и других страниц используется механизм SlugMapping. Он представляет собой таблицу в базе данных, которая связывает оригинальный slug с его переведенными версиями. Это позволяет иметь уникальные и SEO-дружественные URL для каждой языковой версии контента. Для упрощения процесса переведенные slugs могут генерироваться автоматически с помощью транслитерации.

Пошаговая настройка i18n роутинга

Конфигурация мультиязычности начинается с определения поддерживаемых языков и правил роутинга. Этот процесс можно разбить на несколько ключевых шагов, обеспечивающих корректную работу всей системы.

1. Создание файла конфигурации. В проекте создается файл, например, i18n/routing.ts. В нем определяются все поддерживаемые локали (ru, en), а также устанавливается локаль по умолчанию (default locale), которая будет использоваться, если язык не указан в URL.

1. Подготовка файлов переводов. Для каждого языка создаются JSON-файлы в директории messages. Файлы ru.json и en.json будут содержать пары "ключ-значение", где ключ — это идентификатор текстовой строки, а значение — её перевод на соответствующий язык.

1. Настройка middleware. Middleware в Next.js играет решающую роль. Он перехватывает все входящие запросы, анализирует URL на наличие языкового префикса (например, /ru/ или /en/). Если префикс отсутствует, middleware автоматически выполняет редирект на URL с локалью по умолчанию, обеспечивая бесшовный пользовательский опыт.

Практическая реализация: блог и интерфейс

Рассмотрим применение настроенной системы на реальном примере проекта Media Jet, где мультиязычность реализована как для контента, так и для элементов интерфейса. Основная задача — обеспечить полный перевод статей блога и всех статических текстов на сайте.

Для статей блога в базе данных используется модель ArticleTranslation. Эта модель позволяет хранить разные версии одной и той же статьи для каждого языка, включая заголовок, текст и, что важно, уникальный slug. При создании русскоязычной статьи, например, 'Как создать QR-меню', slug kak-sozdat-qr-menyu генерируется автоматически. Для английской версии создается отдельный slug how-to-create-qr-menu.

Что касается интерфейса, все текстовые элементы, от кнопок до заголовков, переводятся с помощью хука useTranslations из библиотеки next-intl. В коде компонента вызывается этот хук с указанием нужного ключа из JSON-файла, и библиотека подставляет соответствующий перевод для текущей активной локали. Это обеспечивает полную поддержку русского и английского языков во всем приложении.

Принципы роутинга и автоматических редиректов

Правильно настроенный роутинг — залог интуитивно понятной навигации и хорошей индексации поисковыми системами. В реализованной архитектуре URL-адреса имеют четкую и предсказуемую структуру. Например, русская версия статьи доступна по адресу /ru/blog/article-slug, а английская — по адресу /en/blog/article-slug.

Ключевой особенностью системы является автоматический редирект. Если пользователь пытается зайти на страницу без указания локали в URL (например, mediajet.com/blog/article-slug), настроенный middleware перехватывает этот запрос. Он определяет локаль по умолчанию (допустим, ru) и перенаправляет пользователя на корректный адрес: mediajet.com/ru/blog/article-slug. Это устраняет дублирование контента и обеспечивает консистентность ссылок.

Рассмотрим наглядный пример со статьей 'Как создать QR-меню'.

Такой подход позволяет поисковым системам четко разделять языковые версии, а пользователям — легко ориентироваться на сайте.

Оптимизация производительности и SEO

Для мультиязычных сайтов критически важна не только функциональность, но и высокая производительность вместе с правильной поисковой оптимизацией. Для достижения этих целей используется несколько техник.

Во-первых, применяется статическая генерация (SSG) для каждой локали. Next.js генерирует отдельные HTML-файлы для русской и английской версий страниц, что обеспечивает максимальную скорость загрузки. Для контента, который может обновляться, например, статей блога, используется инкрементальная статическая регенерация (ISR). Это позволяет обновлять страницы в фоновом режиме без необходимости полной пересборки сайта.

• Кэширование переводов. Файлы с переводами кэшируются на стороне сервера, чтобы минимизировать задержки при рендеринге страниц.
• Использование тегов hreflang. На каждой странице размещаются специальные мета-теги hreflang, которые указывают поисковым системам на наличие альтернативных языковых версий этой же страницы. Это помогает Google и другим поисковикам правильно индексировать контент и показывать пользователям наиболее релевантную версию в результатах поиска.

Такая архитектура изначально поддерживает два языка (ru, en), но легко масштабируется для поддержки десяти и более языков, сохраняя при этом высокую производительность и SEO-эффективность.