Next.js i18n Routing: URLs for a Global Audience

WHY IT EXISTS To serve a single application to a global audience with different languages and regional preferences. Without a dedicated routing strategy, you would face messy conditional logic or have to maintain separate, costly deployments for each language, which is a nightmare for maintenance and SEO.

THE MENTAL MODEL Treat each language as a first-class citizen of your site's architecture, starting with the URL. It's like having different-colored front doors for the same house, each labeled in a different language. A user entering through the /fr door will experience the entire house in French, from navigation to content.

HOW IT WORKS In your next.config.js file, you define a list of supported locales (e.g., ['en', 'fr', 'de']) and a defaultLocale. Next.js then automatically handles two main strategies: path-based routing, where it prefixes URLs with the locale (/fr/dashboard), and domain-based routing (fr.example.com). The framework makes the current locale available through hooks and utilities, so your components know which language's content to render.

WHEN TO USE IT Use this immediately when your application targets users in more than one language market. It's critical for e-commerce, SaaS platforms, and marketing sites that need to provide a localized experience. It also significantly boosts international SEO by creating distinct, indexable URLs for each language.

WHEN NOT TO USE IT If your application will only ever exist in a single language, i18n routing is unnecessary complexity. Also, if your only international requirement is formatting dates, numbers, or currencies without changing the UI language, you can use lighter-weight libraries without involving the routing layer.

ONE CANONICAL EXAMPLE A user from Germany visits your site. Their browser's Accept-Language header indicates a preference for German ('de'). Your Next.js app, configured to support German, automatically redirects them from the root / to /de. When they click a link to the products page, they are sent to /de/produkte, not /products. The page component then uses the 'de' locale to fetch and display product descriptions in German.