Next.js Internationalization

Nest every route under a dynamic segment so the URL includes the locale.

app/
  [lang]/
    layout.tsx
    page.tsx          // /en, /es
    about/page.tsx    // /en/about

Read the current locale in a page by awaiting the route params.

export default async function Page(
  props: PageProps<'/[lang]'>
) {
  const { lang } = await props.params;
  return <p>Current locale: {lang}</p>;
}

List the supported locales so each one is prebuilt as a static page.

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

Set the document language from the route so browsers and crawlers can read it.

export default async function Layout(
  props: LayoutProps<'/[lang]'>
) {
  const { lang } = await props.params;
  return (
    <html lang={lang}>
      <body>{props.children}</body>
    </html>
  );
}

Keep the text for each language in its own JSON file.

// dictionaries/es.json
{
  "nav": { "home": "Inicio" },
  "cart": { "add": "Agregar al carrito" }
}

Load only the dictionary for the requested locale, on the server.

import 'server-only';

const dictionaries = {
  en: () =>
    import('./en.json').then((m) => m.default),
  es: () =>
    import('./es.json').then((m) => m.default),
};

export const getDictionary = (lang: 'en' | 'es') =>
  dictionaries[lang]();

Fetch the dictionary in a Server Component and read keys from it.

const dict = await getDictionary(lang);

return <button>{dict.cart.add}</button>;

Define the supported locales and a default in one shared place.

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

Pick the visitor's preferred language from the request header.

function getLocale(request: NextRequest) {
  const h = request.headers.get('accept-language');
  const preferred = h?.split(',')[0].slice(0, 2);
  return locales.includes(preferred ?? '')
    ? preferred
    : defaultLocale;
}

Redirect requests without a locale prefix to the detected locale.

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const hasLocale = locales.some((l) =>
    pathname.startsWith(`/${l}`)
  );
  if (hasLocale) return;

  const locale = getLocale(request);
  request.nextUrl.pathname = `/${locale}${pathname}`;
  return NextResponse.redirect(request.nextUrl);
}

Format a date for the current locale without any extra library.

const date = new Intl.DateTimeFormat(lang, {
  dateStyle: 'long',
}).format(new Date());

Format prices and numbers with the right separators and currency symbol.

const price = new Intl.NumberFormat(lang, {
  style: 'currency',
  currency: 'EUR',
}).format(19.99);

Link to the same page in another language by swapping the locale prefix.

import Link from 'next/link';

export function Switcher({ path }: { path: string }) {
  return (
    <nav>
      <Link href={`/en${path}`}>English</Link>
      <Link href={`/es${path}`}>Español</Link>
    </nav>
  );
}

Tell search engines which URL serves each language version of a page.

export const metadata: Metadata = {
  alternates: {
    languages: {
      en: '/en',
      es: '/es',
    },
  },
};