Маршрутизация на основе языка

Настройка маршрутизации на основе языка в Next.js (App Router)

Проблема

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

Решение

Добавьте идентификатор языка непосредственно в путь URL, например /en/about или /fr/about. Это делает каждый путь уникальным для конкретного языка, устраняя неоднозначность как для пользователей, так и для поисковых систем.

Шаги

1. Создайте динамический сегмент для языка

В маршрутизаторе приложений Next.js вы обрабатываете маршрутизацию по языкам, создавая папку с динамическим сегментом в корне вашего каталога app. Создайте новую папку с именем [lang] внутри app и переместите ваш основной файл page.tsx в нее.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Главная страница</h1>
      <p>Текущий язык: {params.lang}</p>
    </div>
  );
}

Эта папка [lang] захватывает первую часть URL (например, 'en' или 'fr') и передает ее как свойство lang внутри объекта params вашему компоненту страницы. Теперь вы можете получить доступ к вашей странице по URL, таким как /en или /fr.

2. Обновите корневой макет

Ваш корневой файл layout.tsx также должен быть перемещен в папку app/[lang]. Он также будет получать параметр lang, который вы должны использовать для установки атрибута lang в теге <html> для обеспечения доступности и SEO.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

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

3. Определите поддерживаемые языки

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

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Эта функция сообщает Next.js, что ваше приложение поддерживает /en, /es и /fr. Запросы для других путей (например, /de) приведут к отображению страницы 404 Not Found.

4. Добавьте вложенные маршруты

Все остальные страницы вашего приложения теперь создаются внутри папки [lang]. Например, чтобы создать страницу "о нас", добавьте файл app/[lang]/about/page.tsx.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Страница "О нас"</h1>
      <p>Текущий язык: {params.lang}</p>
    </div>
  );
}

Этот файл автоматически создает маршруты, доступные по адресам /en/about, /es/about и /fr/about. Параметр lang доступен на всех страницах, если он необходим для получения правильного переведенного контента.