Интернационализация (i18n) — это процесс разработки приложения, которое можно легко адаптировать к различным языкам и регионам без технических изменений. В этой статье вы узнаете, как настроить i18n в приложении Next.js и создать переключатель языка для переключения между английским и испанским с помощью next-intl.

Монтаж

Во-первых, вам необходимо установить библиотеку next-intl, которая упрощает управление интернационализацией в Next.js. Запустите следующую команду в своем терминале:

npm install next-intl

Структура проекта

Структура проекта будет следующей:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Настройка сообщений перевода

Создайте каталог сообщений в корне вашего проекта. В этот каталог добавьте файлы JSON для каждого языка, который вы хотите поддерживать.

сообщения/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

сообщения/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

Эти файлы содержат переводы фраз, которые будет использовать ваше приложение.

2. Настройка Next.js

Настройте Next.js для поддержки интернационализации в next.config.mjs.

следующий.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Этот файл настраивает Next.js для загрузки правильных сообщений перевода в зависимости от запрошенного языка.

3. Промежуточное ПО для интернационализации

Создайте промежуточное программное обеспечение для обработки перенаправления и установки языка по умолчанию.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Это промежуточное программное обеспечение обрабатывает перенаправление на язык по умолчанию, если он не указан.

4. Конфигурация интернационализации

Создайте файл конфигурации для управления настройками интернационализации.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Этот файл проверяет локали и загружает соответствующие сообщения.

5. Настройка макета и страницы

Настройте макет и главную страницу для поддержки интернационализации.

src/app/[локаль]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[локаль]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

Эти файлы настраивают макет и главную страницу для использования переводов.

6. Создание переключателя языка

Наконец, создайте переключатель языка для переключения между английским и испанским языками.

src/app/[локаль]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      
        English
        Spanish
      
    
  );
}

Этот компонент позволяет пользователям менять язык интерфейса.

Заключение

С помощью этих шагов вы успешно настроили интернационализацию в своем приложении Next.js и создали переключатель языков для переключения между английским и испанским языками. Это позволит вашему приложению поддерживать несколько языков и обеспечивать локализованный пользовательский интерфейс.