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

Установка

Шаг 1: Создайте динамический маршрут

Создайте каталог [locale] в папке app/ и переместите в него все страницы:

Шаг 2: Добавьте middleware

Создайте файл middleware.ts в корне проекта:

import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  // Применяется ко всем путям, кроме маршрутов API, статических файлов и внутренних ресурсов Next.js
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Это включает автоматическое определение языка и маршрутизацию URL с префиксами локали, например /en/about, /es/about.

Определение языка

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

1. Локаль в URL — /es/about → испанский
2. Пользовательская cookie — ранее выбранный язык
3. Заголовки браузера — заголовок Accept-Language
4. Локаль по умолчанию — настроенный язык‑замена

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

Локализованные пути

Настраивайте URL‑пути для разных языков:

export default createNextMiddleware({
  pathConfig: {
    // По‑английски: /en/products, по‑китайски: /zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // Динамические маршруты: /en/product/123, /zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

Структура URL

По умолчанию для языка по умолчанию не будет добавляться префикс с кодом локали:

/about     → /about        (локаль по умолчанию: английский)
/about     → /es/about     (испанский)
/about     → /fr/about     (французский)

Добавить префикс для локали по умолчанию

Чтобы добавить префикс для всех локалей, включая локаль по умолчанию:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

Результат:

/about     → /en/about     (английский, с префиксом)
/about     → /es/about     (испанский, с префиксом)
/about     → /fr/about     (французский, с префиксом)

Распространённые проблемы

Отсутствует динамический маршрут

Все страницы должны располагаться внутри [locale]/:

❌ Неправильно:
app/
├── page.tsx
└── about/page.tsx

✅ Правильно:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx

Настройка совпадений (matcher)

Исключите маршруты API и статические файлы:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Дальнейшие шаги

• SSG Guide — статическая генерация с маршрутизацией по локалям
• RTL Support — языки с письмом справа налево
• Справочники API: