Internationalization in the Next.js App Router
Internationalization touches routing, data fetching, formatting (dates, numbers), and SEO. The App Router encourages colocated async server rendering—good for translating static strings on the server without bloating the client bundle.
Routing strategies
Common patterns:
- Prefix:
/en/blog,/pt/blogvia[locale]segment. - Domain or cookie locale without URL prefix—harder for SEO and caching; use when product demands it.
middleware.ts can negotiate default locale from Accept-Language and redirect to a prefixed path.
Message catalogs
Libraries like next-intl provide useTranslations on the client and async loaders on the server. Keep keys namespaced (Blog.title) and avoid English copy as keys when translators work in TMS tools.
Server vs client bundles
Prefer translating in Server Components for marketing pages. Interactive islands that need instant locale switching may hydrate with a small client dictionary or lazy-loaded chunks per locale.
RTL and layout
Set dir="rtl" on <html> when locale requires it. Test flexbox/grid assumptions—margin-inline-start beats margin-left for symmetry.
hreflang
Emit alternate links for each locale version of a page so search engines deduplicate correctly.
Summary
Plan URL structure first, then pick a message loading strategy that keeps LCP fast (server-first) while supporting interactive locale toggles where needed.