Международная локализация

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

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

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

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

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

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

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). С этой информацией вы можете перенаправить пользователя на основе региональной настройки внутри Средств промежуточного слоя.

import { NextResponse } from "next/server";
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to the above or using a library
function getLocale(request) { ... }
 
export function middleware(request) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

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

// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

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

Локализация

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

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

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

{
  "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) => dictionaries[locale]()

Исходя из выбранного языка, мы можем получить словарь в макете или на странице.

import { getDictionary } from './dictionaries'
 
export default async function Page({ params: { lang } }) {
  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 function Root({ children, params }) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  )
}

Ресурсы

• Минимальная маршрутизация и переводы i18n
• next-intl
• next-international
• next-i18n-router