Руководство по интернационализации Next.js (i18n)

Next.js – это платформа с открытым исходным кодом, созданная Vercel (ранее ZEIT). Он построен на основе React и предоставляет готовое решение для рендеринга на стороне сервера (SSR) компонентов React. Кроме того, он поддерживает генерацию статических сайтов (SSG), что может помочь нам создавать сверхбыстрые и удобные веб-сайты. моментально. Несмотря на то, что это относительно молодой фреймворк, он имеет хорошую основу для интернационализации , которая хорошо дополняет существующие библиотеки i18n. В следующих главах вы узнаете, как настроить интернационализацию в своем приложении Next.js.

Создать новый проект Next.js

Сначала создадим новый проект Next.js с помощью инструмента create-next-app CLI.

``` ударить

npx создать следующее приложение nextjs-i18n-пример

Добавить зависимость React Intl

Как мы упоминали ранее, Next.js хорошо работает с существующими библиотеками i18n (react-intl, lingui , next-intl и подобные). В этом уроке мы будем использовать файл react-intl.

``` ударить

cd nextjs-i18n-пример

npm я реагирую-между

Добавить конфигурацию для интернациональной маршрутизации

Переводы и маршрутизация — два основных столпа интернационализации. Добавленная ранее библиотека react-intl будет обрабатывать переводы и форматирование. Что касается маршрутизации, Next.js имеет встроенную поддержку для этого. Эта встроенная поддержка предлагает два варианта: маршрутизацию подпути и маршрутизацию домена. В этом руководстве мы будем использовать маршрутизацию подпутей, поскольку она менее сложна и более распространена на обычных веб-сайтах. Для этого давайте изменим файл next.config.js на конфигурацию i18n.

```javascript

/* @type {import('next').NextConfig} /

константа nextConfig = {

реагироватьStrictMode: правда,

i18n: {

// Языки, которые вы хотите поддерживать в своем приложении

локали: ["en", "fr"],

// Локаль по умолчанию, которую вы хотите использовать при посещении пути с префиксом, не относящимся к локали, например. /привет

язык по умолчанию: "en",

модуль.экспорт = следующая конфигурация;

:::Информация

Интернационализированная маршрутизация доступна начиная с Next.js 10.

Создать файлы локализации

Следующим важным моментом является добавление файлов локализации. Для этого создадим каталог lang. Добавьте в него два файла JSON: en.json и fr.json. Эти файлы будут содержать переводы на английский и французский языки соответственно. Ниже вы можете увидеть структуру проекта после добавления указанных файлов.

nextjs-i18n-пример

|-- язык

| |-- en.json

| |-- fr.json

|-- страницы

| |-- API

| |-- _app.js

| |-- index.js

| |-- ...

|-- публичный

|-- package.json

|-- пакет-lock.json

После этого заполните файлы локализации сообщениями, которые мы будем использовать позже.

Файл en.json:

```json

"page.home.head.title": "Пример i18n Next.js",

"page.home.head.meta.description": "Пример Next.js i18n — английский",

"page.home.title": "Добро пожаловать в руководство по i18n Next.js",

"page.home.description": "Сейчас вы просматриваете домашнюю страницу на английском языке 🚀"

Файл fr.json:

```json

"page.home.head.title": "Пример i18n Next.js",

"page.home.head.meta.description": "Пример Next.js i18n - французский",

"page.home.title": "Биенвеню в Next.js i18n didacticiel",

"page.home.description": "Вы можете обратиться за консультацией к странице d'accueil en Français 🚀"

Настройте react-intl в проекте Next.js

Интернационализированные файлы маршрутизации и локализации — это только первая часть задачи. Вторая часть — настройка библиотеки react-intl. Ниже вы можете увидеть, какие изменения были внесены в файл _app.js.

```javascript

импортировать {useRouter} из "следующего/маршрутизатора";

импортировать {IntlProvider} из "реагировать-интл";

импортировать en из "../lang/en.json";

импортировать fr из "../lang/fr.json";

импортировать "../styles/globals.css";

постоянные сообщения = {

ан,

фр,

функция MyApp({Компонент, pageProps}) {

const {локаль} = useRouter();

вернуть (

<Компонент {...pageProps} />

экспорт MyApp по умолчанию;

Адаптировать страницы для i18n

Мы сделали большую часть работы. Последний шаг – собрать все это вместе. Поэтому мы собираемся обновить файл index.js в каталоге pages. Ниже вы можете найти два подхода к доступу к сообщениям локализации: императивный и декларативный. Мы уже рассмотрели эти два способа использования, форматирование options и аналогичные в другой пост.

Файл index.js:

```javascript

импортировать заголовок из «следующего/заголовка»;

импортировать ссылку из "далее/ссылка";

импортировать {useRouter} из "следующего/маршрутизатора";

импортировать {FormattedMessage, useIntl} из "реагировать-интл";

импортировать стили из "../styles/Home.module.css";

функция экспорта по умолчанию Home (реквизит) {

const {локали} = useRouter();

константа intl = useIntl();

const title = intl.formatMessage({id: "page.home.head.title" });

const description = intl.formatMessage({id: "page.home.head.meta.description" });

вернуть (

Поздравляем! 🎉
Вы успешно настроили интернационализацию в своем проекте Next.js.

Более подробную информацию и примеры вы можете найти в исходном посте.

Все примеры кода, использованные в этой статье, доступны в репозитории GitHub.

Я надеюсь, что вы нашли это руководство полезным.

Не стесняйтесь давать мне отзывы в комментариях.

Также опубликовано [Здесь] (https://localizely.com/blog/nextjs-i18n-tutorial/)