i18n in the App Router: URLs, dictionaries and metadata

i18n in the App Router lives in a dynamic segment, not in a package: app/[lang] plus a dictionary loaded on the server. If the locale exists only in a cookie, that page cannot be indexed.

A segment, not a package

The locale is part of the URL. app/[lang]/page.tsx serves every language, and generateStaticParams tells Next which values to generate at build time. No wrapper, no global provider, no configuration file.

app/
  [lang]/
    layout.tsx
    page.tsx
    dizionari/
      it.json
      en.json
  layout.tsx
middleware.ts

Load the dictionary on the server

A static JSON import inside the server component is the simplest and fastest shape: the file lands in the server bundle, never in the client one. Pass down only the strings an interactive component needs.

// app/[lang]/page.tsx
import { notFound } from "next/navigation";

const lingue = ["it", "en"] as const;
type Lingua = (typeof lingue)[number];

const dizionari: Record Promise }>> = {
  it: () => import("../dizionari/it.json"),
  en: () => import("../dizionari/en.json"),
};

export function generateStaticParams() {
  return lingue.map((lang) => ({ lang }));
}

export default async function Page({ params }: { params: Promise }) {
  const { lang } = await params;
  if (!lingue.includes(lang as Lingua)) notFound();
  const dizionario = (await dizionari[lang as Lingua]()).default;
  return {dizionario.titolo};
}

Where translation ends and code begins

Metadata: the part people break

generateMetadata must declare alternates.canonical and alternates.languages for every published language, plus openGraph.locale. A canonical that always points at Italian undoes the work on the rest of the page. The recurring mistakes are collected in hreflang errors that cost traffic.

EneUI indexes 111,985 components from 1,472 libraries and 1,556 blocks: the number was measured on 1 November 2026 on ui.eneawork.it, not estimated. A language switcher changes with the design system, not with the locale.

Catalogue components that fit here

Three records to start from: the language selector dropdown, the navbar block family with room for the switch, and the header blocks for a bilingual masthead.

The middleware redirect pattern is the same one I use for authentication, described in Next.js middleware for authentication. The framework comparison still holds in Astro vs Next.js for documentation. Folder layout is in App Router project structure.

The limit to budget for

generateStaticParams multiplies pages by language. Four hundred articles in two languages means 800 HTML files per build, and every new language adds a factor. Measure the cost before opening a third market, not after.