Building Multilingual Websites with Next.js
A practical guide to i18n in Next.js App Router. Content organization, routing, SEO, language switching.
If your business serves customers in multiple countries, a multilingual website isn't optional. We build multilingual sites all the time for clients across the DACH region and the Balkans. Next.js App Router is our go-to for this. Here are the patterns we use.
Locale-Based Routing with the App Router
App Router makes locale-based routing clean and maintainable. We structure our app with a dynamic [locale] segment at the root, so every route is scoped to a language: /en/about, /de/über-uns, /sr/o-nama. Predictable URLs, which matters for SEO and user expectations. Middleware handles locale detection and redirects so users land on the right version automatically.
Organizing Content Per Locale
For content-heavy sites, we store translations in structured JSON files organized by locale. Each locale gets its own directory with matching file names. Easy to see what's translated and what's missing. For dynamic content (blog posts, case studies), we use the same slug across locales and load the right translation at build time. Keeps the pipeline simple and avoids the overhead of third-party translation management for most projects.
SEO for Multilingual Sites
Multilingual SEO is more than translating meta tags. We add hreflang tags on every page to tell search engines which language versions exist, set the correct lang attribute on the HTML element, and generate separate sitemaps per locale. Each language version gets unique meta descriptions and Open Graph data. Machine-translating your English meta tags into German? Missed opportunity. Write copy that actually resonates with that audience.
Language Switcher Done Right
A good language switcher keeps the user on their current page when switching locales. Sounds obvious, but tons of implementations just dump you back to the homepage. We build our switchers to map the current route to its equivalent in the target locale, handling cases where a page might not exist in every language. The switcher also sets a cookie so we remember the preference for next time.
Multilingual websites look simple on the surface but have real depth in the details. Next.js App Router gives us a solid foundation, and years of European multilingual projects taught us where the pitfalls are. If you're planning a multilingual launch, getting the architecture right from day one saves a ton of time later.
