Интернационализация Next.js (i18n) с next-i18next и Intlayer

Содержание

Что такое next-i18next?

next-i18next, это один из самых популярных фреймворков для интернационализации (i18n) в приложениях Next.js. Построенный на мощной экосистеме i18next, он предоставляет комплексное решение для управления переводами, локализацией и переключением языков в проектах Next.js.

Однако next-i18next имеет некоторые сложности:

• Сложная конфигурация: Настройка next-i18next требует нескольких конфигурационных файлов и тщательной настройки экземпляров i18n на стороне сервера и клиента.
• Разрозненные переводы: Файлы переводов обычно хранятся в отдельных директориях от компонентов, что затрудняет поддержание согласованности.
• Ручное управление пространствами имён: Разработчикам необходимо вручную управлять пространствами имён и обеспечивать правильную загрузку ресурсов переводов.
• Ограниченная типобезопасность: Поддержка TypeScript требует дополнительной настройки и не обеспечивает автоматическую генерацию типов для переводов.

Что такое Intlayer?

Intlayer, это инновационная, открытая библиотека интернационализации, разработанная для устранения недостатков традиционных решений i18n. Она предлагает современный подход к управлению контентом в приложениях Next.js.

Смотрите конкретное сравнение с next-intl в нашем блоге next-i18next vs. next-intl vs. Intlayer.

Почему стоит сочетать Intlayer с next-i18next?

Хотя Intlayer предоставляет отличное автономное решение для i18n (см. наше руководство по интеграции с Next.js), вы можете захотеть комбинировать его с next-i18next по нескольким причинам:

1. Существующая кодовая база: У вас уже есть реализованная система next-i18next, и вы хотите постепенно перейти на улучшенный опыт разработки с Intlayer.
2. Требования наследия: Ваш проект требует совместимости с существующими плагинами или рабочими процессами i18next.
3. Знакомство команды: Ваша команда привыкла к next-i18next, но хочет лучшее управление контентом.

Для этого Intlayer может быть реализован как адаптер для next-i18next, чтобы помочь автоматизировать ваши JSON-переводы в CLI или CI/CD пайплайнах, тестировать ваши переводы и многое другое.

В этом руководстве показано, как использовать превосходную систему декларации контента Intlayer, сохраняя при этом совместимость с next-i18next.

Пошаговое руководство по настройке Intlayer с next-i18next

1. 1

   Установка зависимостей

   Установите необходимые пакеты с помощью предпочитаемого менеджера пакетов:

   bash

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   npm install intlayer @intlayer/sync-json-plugin --save-devnpx intlayer init

   Объяснение пакетов:

   • intlayer: Основная библиотека для декларации и управления контентом
   • @intlayer/sync-json-plugin: Плагин для синхронизации деклараций контента Intlayer с форматом JSON i18next
2. 2

   Реализация плагина Intlayer для обёртывания JSON

   Создайте файл конфигурации Intlayer для определения поддерживаемых локалей:

   Если вы также хотите экспортировать JSON-словарь для i18next, добавьте плагин syncJSON:

   intlayer.config.ts

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,    }),  ],};export default config;

   Плагин syncJSON автоматически обернет JSON. Он будет читать и записывать JSON-файлы без изменения архитектуры контента.

   Если вы хотите, чтобы JSON сосуществовал с файлами декларации контента Intlayer (.content файлы), Intlayer будет работать следующим образом:

   plaintext

   Копировать содержимое

   Копировать код

   Копировать код в буфер обмена

   1. загрузит как JSON, так и файлы декларации контента и преобразует их в словарь Intlayer.2. если возникнут конфликты между JSON и файлами декларации контента, Intlayer выполнит слияние всех словарей. В зависимости от приоритета плагинов и файлов декларации контента (все настраивается).

   Если изменения внесены с помощью CLI для перевода JSON или с использованием CMS, Intlayer обновит JSON-файл с новыми переводами.

   Для получения дополнительной информации о плагине syncJSON обратитесь к документации плагина syncJSON.

Конфигурация Git

Исключите сгенерированные файлы из системы контроля версий:

# Игнорировать файлы, сгенерированные Intlayer.intlayer

Эти файлы автоматически пересоздаются во время процесса сборки и не требуют коммита в ваш репозиторий.

Расширение VS Code

Для улучшения опыта разработчика установите официальное расширение Intlayer для VS Code:

Установить из магазина расширений VS Code