Введение в i18n (международзация) в Next.js

8. Введение в i18n (международзация) в Next.js

В вашем проекте модуль 16-i18n пока минимален (простая страница), но он служит якорем для темы i18n — поддержки нескольких языков. Здесь собраны общие принципы и базовые паттерны того, как обычно строят i18n в App Router.

8.1. Что такое i18n в контексте Next.js

i18n (internationalization) — это:

возможность отображать одну и ту же страницу на разных языках;
переключение языка интерфейса (RU/EN/DE/…);
локализация форматов:
- даты,
- чисел,
- валют,
- текстов ошибок.

В Next.js есть два основных подхода:

Встроенный i18n в next.config + App Router, когда язык — часть URL;
Библиотеки уровня React (next-intl, next-translate, react-intl, i18next и т.п.).

8.2. Базовая страница модуля i18n

В вашем проекте есть простая страница:

export default function Page() {
  return <div>16-i18n</div>;
}

Её можно развивать до полноценного примера:

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

8.3. i18n через URL и App Router

Один из типичных подходов — язык как первый сегмент URL:

/en/...
/ru/...
/de/... и т.п.

Структура app может выглядеть так:

app/
  [locale]/
    layout.tsx
    page.tsx
    about/
      page.tsx

Пример app/[locale]/layout.tsx:

export default function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale } = params;

  return (
    <html lang={locale}>
      <body>
        {/* Здесь можно отрисовать переключатель языков и т.п. */}
        {children}
      </body>
    </html>
  );
}

Пример app/[locale]/page.tsx:

const messages = {
  ru: {
    title: 'Главная страница',
  },
  en: {
    title: 'Home page',
  },
};

export default function HomePage({ params }: { params: { locale: 'ru' | 'en' } }) {
  const t = messages[params.locale];

  return <h1>{t.title}</h1>;
}

8.4. Использование библиотек для локализации (общий паттерн)

Хотя в вашем коде конкретная библиотека i18n не используется, общий паттерн выглядит так:

Хранение переводов в JSON/YAML‑файлах:

// messages.ru.json
{
  "home.title": "Главная страница",
  "home.description": "Описание по-русски"
}

// messages.en.json
{
  "home.title": "Home",
  "home.description": "English description"
}

Контекст переводов (TranslationsProvider), оборачивающий приложение.
Хук useTranslations или аналог для получения строк:

const t = useTranslations();

return <h1>{t('home.title')}</h1>;

8.5. Форматирование чисел, дат и валют

Даже без специальных библиотек можно использовать стандартный Intl API:

const date = new Date();

const formattedDateRu = new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'long',
}).format(date);

const formattedCurrencyEn = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
}).format(1234.56);

В Next.js это можно делать:

в серверных компонентах (форматирование на сервере),
в клиентских компонентах (учитывая пользовательский язык).

8.6. Переключатель языка

Типичный вид переключателя языка (для URL‑подхода):

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const locales = ['en', 'ru'] as const;

export function LocaleSwitcher({ currentLocale }: { currentLocale: string }) {
  const pathname = usePathname();

  // Простейший пример: заменяем первый сегмент на новый locale
  const segments = pathname.split('/');
  segments[1] = currentLocale; // /en/..., /ru/...

  return (
    <div>
      {locales.map((locale) => (
        <Link key={locale} href={`/${locale}${segments.slice(2).join('/')}`}>
          {locale.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}

8.7. Практические рекомендации по i18n

Сразу выбирайте стратегию URL:
- язык как сегмент (/ru/...) — обычно предпочтительный вариант;
- язык как поддомен (ru.example.com) — отдельный уровень конфигурации;
- язык как cookie/заголовок — реже, сложнее сочетать с SEO.
Храните переводы отдельно от кода:
- в JSON/TS‑объектах,
- с единым ключевым пространством (home.title, home.description и т.п.).
Следите за SEO:
- для разных языков используйте lang в <html lang="...">;
- при необходимости добавляйте hreflang в метаданные/head.

Модуль 16-i18n в вашем коде пока служит точкой входа в тему, а этот раздел конспекта помогает вспомнить основные подходы к i18n в Next.js и то, как их можно развить поверх существующей структуры App Router.