Next.js i18n Routing: URLs for a Global Audience
Next.js i18n routing maps locales to URLs, like /en/about or /es/acerca-de. It's not just text translation; it's building a site structure for each language. This improves SEO and user experience.
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.
Interview question
What primary challenge does Next.js i18n routing address for applications targeting a global audience?
- a.Providing distinct, indexable URLs for each language, avoiding separate deployments or complex conditional logic.Correct
- b.Automatically translating all content on a page based on user browser settings.
- c.Simplifying the formatting of dates, numbers, and currencies across different regional preferences.
- d.Enabling dynamic content loading based on the user's geographical location without changing the UI language.
Why? this is the answer
Next.js i18n routing is designed to provide distinct, indexable URLs for each language, which is critical for international SEO and user experience, and prevents the need for costly separate deployments or messy conditional logic. Option C is incorrect because the card explicitly states that simple date/number formatting does not require i18n routing.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles