Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Интернационализированная маршрутизация и локализация на фреймворке 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.
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, ознакомьтесь со статьями ниже:
Дополнительные материалы
https://nextjs.org/docs/advanced-features/i18n-routing
О переводчике
Перевод статьи выполнен в Alconost.
Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
