Маршрутизація кількома мовами · fullstack.org.ua

fullstack.org.ua

Маршрутизація кількома мовами · fullstack.org.ua

app/
├── [locale]/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── layout.tsx
└── page.tsx
components/
└── language-switcher.tsx
i18n/
├── config.ts
└── dictionaries.ts
middleware.ts

typescript

export const locales = ["uk", "en"] as const;

export type Locale = (typeof locales)[number];

export const defaultLocale: Locale = "uk";

export function isLocale(value: string): value is Locale {
  return locales.includes(value as Locale);
}

typescript

import type { Locale } from "./config";

type Dictionary = {
  homeTitle: string;
  homeDescription: string;
  aboutTitle: string;
  aboutDescription: string;
  switchLanguage: string;
};

const dictionaries: Record<Locale, Dictionary> = {
  uk: {
    homeTitle: "Головна сторінка",
    homeDescription: "Це українська версія сайту.",
    aboutTitle: "Про нас",
    aboutDescription: "Інформація про нашу команду.",
    switchLanguage: "Змінити мову",
  },
  en: {
    homeTitle: "Home page",
    homeDescription: "This is the English version of the site.",
    aboutTitle: "About us",
    aboutDescription: "Information about our team.",
    switchLanguage: "Change language",
  },
};

export function getDictionary(locale: Locale): Dictionary {
  return dictionaries[locale];
}

tsx

import { notFound } from "next/navigation";
import { LanguageSwitcher } from "../../components/language-switcher";
import { getDictionary } from "../../i18n/dictionaries";
import { isLocale, locales } from "../../i18n/config";

type LocaleLayoutProps = {
  children: React.ReactNode;
  params: Promise<{
    locale: string;
  }>;
};

export function generateStaticParams() {
  return locales.map((locale) => ({
    locale,
  }));
}

export default async function LocaleLayout({
  children,
  params,
}: LocaleLayoutProps) {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

  const dictionary = getDictionary(locale);

  return (
    <html lang={locale}>
      <body>
        <header>
          <nav>
            <a href={`/${locale}`}>{dictionary.homeTitle}</a>
            {" · "}
            <a href={`/${locale}/about`}>{dictionary.aboutTitle}</a>
          </nav>

          <LanguageSwitcher
            currentLocale={locale}
            label={dictionary.switchLanguage}
          />
        </header>

        <main>{children}</main>
      </body>
    </html>
  );
}

tsx

import { notFound } from "next/navigation";
import { getDictionary } from "../../i18n/dictionaries";
import { isLocale } from "../../i18n/config";

type HomePageProps = {
  params: Promise<{
    locale: string;
  }>;
};

export default async function HomePage({ params }: HomePageProps) {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

  const dictionary = getDictionary(locale);

  return (
    <>
      <h1>{dictionary.homeTitle}</h1>
      <p>{dictionary.homeDescription}</p>
    </>
  );
}

tsx

import { notFound } from "next/navigation";
import { getDictionary } from "../../../i18n/dictionaries";
import { isLocale } from "../../../i18n/config";

type AboutPageProps = {
  params: Promise<{
    locale: string;
  }>;
};

export default async function AboutPage({ params }: AboutPageProps) {
  const { locale } = await params;

  if (!isLocale(locale)) {
    notFound();
  }

  const dictionary = getDictionary(locale);

  return (
    <>
      <h1>{dictionary.aboutTitle}</h1>
      <p>{dictionary.aboutDescription}</p>
    </>
  );
}

text

/uk       → українська головна сторінка
/en       → англійська головна сторінка
/uk/about → українська сторінка «Про нас»
/en/about → англійська сторінка «Про нас»

typescript

import { NextRequest, NextResponse } from "next/server";
import { defaultLocale, isLocale } from "./i18n/config";

const publicFile = /\.[^/]+$/;

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  if (
    pathname.startsWith("/_next") ||
    pathname.startsWith("/api") ||
    publicFile.test(pathname)
  ) {
    return NextResponse.next();
  }

  const firstSegment = pathname.split("/")[1];

  if (isLocale(firstSegment)) {
    return NextResponse.next();
  }

  const url = request.nextUrl.clone();
  url.pathname =
    pathname === "/" ? `/${defaultLocale}` : `/${defaultLocale}${pathname}`;

  return NextResponse.redirect(url);
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { locales, type Locale } from "../i18n/config";

type LanguageSwitcherProps = {
  currentLocale: Locale;
  label: string;
};

function getLocalizedPathname(
  pathname: string,
  targetLocale: Locale,
): string {
  const segments = pathname.split("/");
  const firstSegment = segments[1];

  if (locales.includes(firstSegment as Locale)) {
    segments[1] = targetLocale;
  } else {
    segments.splice(1, 0, targetLocale);
  }

  const localizedPathname = segments.join("/");

  if (localizedPathname.length > 1 && localizedPathname.endsWith("/")) {
    return localizedPathname.slice(0, -1);
  }

  return localizedPathname || `/${targetLocale}`;
}

export function LanguageSwitcher({
  currentLocale,
  label,
}: LanguageSwitcherProps) {
  const pathname = usePathname() || `/${currentLocale}`;

  return (
    <div>
      <span>{label}: </span>

      {locales.map((locale) => {
        const href = getLocalizedPathname(pathname, locale);

        return (
          <span key={locale}>
            {locale === currentLocale ? (
              <strong>{locale}</strong>
            ) : (
              <Link href={href}>{locale}</Link>
            )}
            {" "}
          </span>
        );
      })}
    </div>
  );
}

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Multilingual application",
  description: "Application with localized routes",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return children;
}