i18n-seo

Multi-language SEO

Google indexes each language version as its own page. hreflang only tells it which version to show whom — it never merges or ranks them. So each version needs its own URL, its own complete server-rendered HTML in that language, and links between the versions that agree.

Read before touching code: node_modules/next/dist/docs/01-app/02-guides/internationalization.md (Next 16: app/[lang], next/root-params), and src/proxy.ts + obsidian/frontend/robot-form.md (the robot form).

1. Decide the structure (ask the client)

Structure	Example	Use when
Subdirectories (recommended)	acme.com/de/…	almost always — one domain's authority, one deploy, one Search Console property
ccTLDs	acme.de	separate businesses per country, local trust matters more than shared authority; a deploy/domain per market
Subdomains	de.acme.com	only when infrastructure forces it — authority splits like ccTLDs without their local signal
?lang=de / cookie / Accept-Language on one URL	—	never — one URL serves one language to Google

Language or language + market? de serves every German reader; de-AT / de-CH only when the content really differs (prices, legal, spelling). Don't create region variants with identical text.

2. Routes — the language comes from the URL

Hard rule #15 still holds: routes stay static, nothing reads headers() / cookies(). The language is a route segment.

src/app/[lang]/layout.tsx        ← the root layout: <html lang={lang}>
src/app/[lang]/page.tsx          ← imports only from src/views (rule #5)
src/app/[lang]/about/page.tsx
src/app/[lang]/robot-view/page.tsx
src/app/sitemap.ts, robots.ts, llms.txt/, api/   ← stay outside [lang]

(With Payload: src/app/(site)/[lang]/… beside (payload).)

// src/app/[lang]/layout.tsx
import { notFound } from "next/navigation";
import { LOCALES, hasLocale } from "@/lib/i18n";

export const generateStaticParams = () => LOCALES.map((lang) => ({ lang }));
export const dynamicParams = false; // an unknown language is a 404, not a render

export default async function RootLayout({ children, params }: LayoutProps<"/[lang]">) {
  const { lang } = await params;
  if (!hasLocale(lang)) notFound();
  return <html lang={lang}>{/* the starter's body, unchanged */}</html>;
}