Интернационализированная маршрутизация и локализация на фреймворке Next.js. Интернационализация (сокращенно «i18n») — это процесс подготовки веб-сайта или веб-приложения для поддержки местных языков и настроек. Делается это в два этапа: первый — добавление интернационализированной маршрутизации, второй — локализация текста.  С 10-й версии в Next.js есть встроенная обработка интернационализированной маршрутизации. В этой статье мы рассмотрим, как добавить интернационализацию в приложение на Next.js — к концу статьи научитесь делать следующее: Добавлять интернационализированную маршрутизацию в приложение на фреймворке Next.js. Обрабатывать переключение языковых стандартов («локалей»). Добавлять в приложение переведенный текст. В этом примере мы будем работать над базовым приложением, созданным с помощью команды create-next-app. Если вы новичок в Next.js, ознакомьтесь с основными принципами в статьей ниже: Первый этап интернационализации — добавление интернационализированной маршрутизации. В приложении Next.js для этого можно добавить конфигурацию i18n в файл next.config.js. Мы передадим объект и укажем два значения.  Первое значение — это массив локалей, которые будут поддерживаться в приложении. Они указываются в виде кодов языка в формате UTS (стандарт определения локалей). В этом примере я добавлю в массив две локали — en (английская) и ja (японская). Второе значение — это строка, указывающая, какую локаль использовать по умолчанию. У меня это будет английская локаль — en. Реализовать интернационализированную маршрутизацию можно двумя способами: по пути и по домену.  Английская локаль: /blog Японская локаль: /ja/blog Английская локаль: example.com/blog  Японская локаль: example.ja/blog Мы будем использовать маршрутизацию по пути.  Next.js умеет определять локаль автоматически в зависимости от настроек у пользователя. Например, если я запущу свой проект и открою его в браузере, я попаду на http://localhost:3000/ — потому что у меня в браузере английский установлен в качестве языка по умолчанию. Если у вас Google Chrome, можете проверить этот параметр в разделе Настройки -> Дополнительные -> Языки. Однако если поставить в браузере японский в качестве языка по умолчанию, я попаду на http://localhost:3000/ja. Обрабатывать переключение между локалями можно также вручную. Это делается с помощью next/link. Для обработки переключения между языками можно передать в next/link свойство locale.  К примеру, добавим две ссылки под заголовком: одну — на английскую локаль, вторую — на японскую. В каждой ссылке будут свойства href="/" и locale (последнее указывает нужный язык).  Нажав на такую ссылку, мы перейдем по соответствующему URL-адресу.  Английская локаль: http://localhost:3000/ Японская локаль: http://localhost:3000/ja Второй этап интернационализации — это перевод контента. Если я открываю страницу английской локали, я хочу видеть сайт на английском языке; если открываю японскую локаль, сайт должен быть на японском.  Самый простой способ локализовать текст — создать два отдельных объекта, в каждом из которых будет переведенный текст. Например, создадим два новых файла: locales/en.js и locales/ja.js.  В файле index.js можно импортировать объекты en и ja. Также надо будет использовать next/router. Проверить, какая локаль используется сейчас, можно, вызвав обработчик useRouter(), который возвращает объект «router». После этого можно задать переменную, указывающую, какая локаль отображается. Здесь мы, по сути, проверяем router.locale. Если это значение равно en, мы делаем переменную t равной объекту en. Если значение router.locale не равно en, мы делаем переменную t равной объекту ja. Затем можно заменить текст заголовка на значение {t.title}. Теперь при изменении локали сайта текст заголовка также будет переключаться на соответствующий язык. Спасибо за внимание! Надеюсь, моя статья помогла вам настроить интернационализацию в приложении на Next.js. В 10-й версии Next.js поддержка интернационализированной маршрутизации уже встроена — подробнее об этом смотрите в документации. Если хотите продолжить изучение Next.js, ознакомьтесь со статьями ниже: https://nextjs.org/docs/advanced-features/i18n-routing Перевод статьи выполнен в Alconost. Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов. Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.