Интернационализация

Next.js позволяет настроить маршрутизацию и рендеринг контента для поддержки нескольких языков. Адаптация вашего сайта к разным локалям включает перевод контента (локализация) и интернационализированные маршруты.

Терминология

Локаль: Идентификатор для набора предпочтений языка и форматирования. Обычно включает предпочитаемый язык пользователя и, возможно, его географический регион.
- en-US: Английский язык, используемый в США
- nl-NL: Нидерландский язык, используемый в Нидерландах
- nl: Нидерландский язык без указания региона

Обзор маршрутизации

Рекомендуется использовать языковые предпочтения пользователя в браузере для выбора локали. Изменение предпочитаемого языка изменит заголовок Accept-Language, поступающий в ваше приложение.

Например, используя следующие библиотеки, вы можете проверить входящий Request, чтобы определить, какую локаль выбрать, на основе Headers, поддерживаемых локалей и локали по умолчанию.

middleware.js

import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'

let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'

match(languages, locales, defaultLocale) // -> 'en-US'

Маршрутизация может быть интернационализирована либо через подпуть (/fr/products), либо через домен (my-site.fr/products). С этой информацией вы можете перенаправить пользователя на основе локали внутри Middleware.

middleware.js

import { NextResponse } from "next/server";

let locales = ['en-US', 'nl-NL', 'nl']

// Получение предпочитаемой локали, аналогично примеру выше или с использованием библиотеки
function getLocale(request) { ... }

export function middleware(request) {
  // Проверка наличия поддерживаемой локали в пути
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (pathnameHasLocale) return

  // Перенаправление, если локаль отсутствует
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // Например, входящий запрос /products
  // Новый URL теперь /en-US/products
  return NextResponse.redirect(request.nextUrl)
}

export const config = {
  matcher: [
    // Пропуск всех внутренних путей (_next)
    '/((?!_next).*)',
    // Опционально: выполнение только для корневого URL (/)
    // '/'
  ],
}

Наконец, убедитесь, что все специальные файлы внутри app/ вложены в app/[lang]. Это позволяет маршрутизатору Next.js динамически обрабатывать разные локали в маршруте и передавать параметр lang в каждый макет и страницу. Например:

// Теперь у вас есть доступ к текущей локали
// Например, /en-US/products -> `lang` будет "en-US"
export default async function Page({
  params,
}: {
  params: Promise<{ lang: string }>
}) {
  const { lang } = await params
  return ...
}

// Теперь у вас есть доступ к текущей локали
// Например, /en-US/products -> `lang` будет "en-US"
export default async function Page({ params }) {
  const { lang } = await params
  return ...
}

Корневой макет также может быть вложен в новую папку (например, app/[lang]/layout.js).

Локализация

Изменение отображаемого контента на основе предпочитаемой локали пользователя, или локализация, не является специфичной для Next.js. Описанные ниже шаблоны будут работать так же с любым веб-приложением.

Предположим, мы хотим поддерживать контент на английском и нидерландском языках в нашем приложении. Мы можем поддерживать два разных "словаря", которые представляют собой объекты, сопоставляющие ключи с локализованными строками. Например:

dictionaries/en.json

{
  "products": {
    "cart": "Add to Cart"
  }
}

dictionaries/nl.json

{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

Затем мы можем создать функцию getDictionary для загрузки переводов для запрошенной локали:

import 'server-only'

const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}

export const getDictionary = async (locale: 'en' | 'nl') =>
  dictionaries[locale]()

import 'server-only'

const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}

export const getDictionary = async (locale) => dictionaries[locale]()

Учитывая текущий выбранный язык, мы можем получить словарь внутри макета или страницы.

import { getDictionary } from './dictionaries'

export default async function Page({
  params,
}: {
  params: Promise<{ lang: 'en' | 'nl' }>
}) {
  const { lang } = await params
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

import { getDictionary } from './dictionaries'

export default async function Page({ params }) {
  const { lang } = await params
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

Поскольку все макеты и страницы в каталоге app/ по умолчанию являются Серверными компонентами, нам не нужно беспокоиться о размере файлов переводов, влияющем на размер клиентского JavaScript-бандла. Этот код будет выполняться только на сервере, и только результирующий HTML будет отправлен в браузер.

Статический рендеринг

Для генерации статических маршрутов для заданного набора локалей мы можем использовать generateStaticParams с любой страницей или макетом. Это может быть глобальным, например, в корневом макете:

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode
  params: Promise<{ lang: 'en-US' | 'de' }>
}>) {
  return (
    <html lang={(await params).lang}>
      <body>{children}</body>
    </html>
  )
}

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}

export default async function RootLayout({ children, params }) {
  return (
    <html lang={(await params).lang}>
      <body>{children}</body>
    </html>
  )
}

Интернационализация

Терминология

Обзор маршрутизации

Локализация

Статический рендеринг

Ресурсы

On this page