intermediate
Locale routing
Design locale prefixes, domains, redirects, hreflang links, persistence, and fallback behavior without trapping users or crawlers.
Locale routing decides how language and region appear in URLs, cookies, or headers—and how users and crawlers switch without dead ends. Common patterns: subdomain (`de.example.com`), path prefix (`/de/docs`), or domain per market. Pair with `hreflang`, sensible redirects, and a documented default locale.
<link rel="alternate" hreflang="en" href="https://example.com/docs" />
<link rel="alternate" hreflang="de" href="https://example.com/de/docs" />
<link rel="alternate" hreflang="x-default" href="https://example.com/docs" />
| Decision | Trade-off | |----------|-----------| | Path prefix | One deploy; clear URLs; needs routing discipline | | Subdomain | CDN/geo flexibility; more DNS/cookie complexity | | Cookie-only locale | Poor shareable URLs and crawl clarity | | Auto-redirect by IP | Often wrong language; bad for SEO and users |
Persist user choice after manual switch; do not trap crawlers in redirect loops between locales.
On interviews: Next.js `[locale]` segments; middleware locale detection; canonical + hreflang together; fallback when translation missing.
Common pitfalls: 302 chains; missing `x-default`; translating slugs without redirects; showing mixed-language chrome.
The trade-off is marketing-friendly URLs versus engineering complexity of one codebase serving many locales.
Checklist:
- Stable URL per locale version of a page.
- hreflang reciprocates between alternates.
- User override beats geo guess.
- Document fallback for untranslated strings.