Добавляем интернационализацию в приложение на Next.js

Интернационализированная маршрутизация и локализация на фреймворке Next.js.

Интернационализация (сокращенно «i18n») — это процесс подготовки веб-сайта или веб-приложения для поддержки местных языков и настроек. Делается это в два этапа: первый — добавление интернационализированной маршрутизации, второй — локализация текста. 

С 10-й версии в Next.js есть встроенная обработка интернационализированной маршрутизации.

В этой статье мы рассмотрим, как добавить интернационализацию в приложение на Next.js — к концу статьи научитесь делать следующее:

• Добавлять интернационализированную маршрутизацию в приложение на фреймворке Next.js.

• Обрабатывать переключение языковых стандартов («локалей»).

• Добавлять в приложение переведенный текст.

В этом примере мы будем работать над базовым приложением, созданным с помощью команды create-next-app.

Если вы новичок в Next.js, ознакомьтесь с основными принципами в статьей ниже:

What I Learned From The Create a Next.js App Tutorial

blog.devgenius.io

Интернационализированная маршрутизация

Первый этап интернационализации — добавление интернационализированной маршрутизации. В приложении Next.js для этого можно добавить конфигурацию i18n в файл next.config.js.

Мы передадим объект и укажем два значения. 

Первое значение — это массив локалей, которые будут поддерживаться в приложении. Они указываются в виде кодов языка в формате UTS (стандарт определения локалей). В этом примере я добавлю в массив две локали — en (английская) и ja (японская).

Второе значение — это строка, указывающая, какую локаль использовать по умолчанию. У меня это будет английская локаль — en.

module.exports = {
  i18n: {
    locales: ['en', 'ja'],
    defaultLocale: '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 (последнее указывает нужный язык). 

<div>
  <Link href="/" locale="en">
    <a className={styles.locale}>English</a>
  </Link>
  <Link href="/" locale="ja">
    <a className={styles.locale}>Japanese</a>
  </Link>
</div>

Нажав на такую ссылку, мы перейдем по соответствующему URL-адресу. 

Английская локаль: http://localhost:3000/

Японская локаль: http://localhost:3000/ja

Локализация

Второй этап интернационализации — это перевод контента. Если я открываю страницу английской локали, я хочу видеть сайт на английском языке; если открываю японскую локаль, сайт должен быть на японском. 

Самый простой способ локализовать текст — создать два отдельных объекта, в каждом из которых будет переведенный текст. Например, создадим два новых файла: locales/en.js и locales/ja.js. 

locales/en.js

export const en = {
  title: 'Welcome to ',
};

locales/ja.js

export const ja= {
  title: 'ようこそへ',
};

В файле index.js можно импортировать объекты en и ja. Также надо будет использовать next/router.

import { useRouter } from 'next/router';
import { en } from '../locales/en';
import { ja } from '../locales/ja';

Проверить, какая локаль используется сейчас, можно, вызвав обработчик useRouter(), который возвращает объект «router». После этого можно задать переменную, указывающую, какая локаль отображается.

const router = useRouter();
const t = router.locale === 'en' ? en : ja;

Здесь мы, по сути, проверяем router.locale. Если это значение равно en, мы делаем переменную t равной объекту en. Если значение router.locale не равно en, мы делаем переменную t равной объекту ja.

Затем можно заменить текст заголовка на значение {t.title}.

<h1 className={styles.title}>
  {t.title}
  <a href="https://nextjs.org">Next.js!</a>
</h1>

Теперь при изменении локали сайта текст заголовка также будет переключаться на соответствующий язык.

Заключение

Спасибо за внимание! Надеюсь, моя статья помогла вам настроить интернационализацию в приложении на Next.js. В 10-й версии Next.js поддержка интернационализированной маршрутизации уже встроена — подробнее об этом смотрите в документации.

Если хотите продолжить изучение Next.js, ознакомьтесь со статьями ниже:

How to Handle Routing in Your Next.js App

levelup.gitconnected.com

Optimize Images From an External Website With the Image Component From Next.js

levelup.gitconnected.com

Дополнительные материалы

https://nextjs.org/docs/advanced-features/i18n-routing

---

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.