Skip to content
tezvyn:
Menu

How do you enable basic i18n routing in Next.js?

Source: nextjs.orgEasyHow cards are made

This tests your knowledge of the built-in Pages Router i18n configuration in next.config.js. A good answer exports an i18n object with locales array, defaultLocale, and optionally localeDetection.

What's really being asked

This question tests whether you understand the built-in internationalization routing feature available in the Next.js Pages Router. Interviewers want to see that you know Next.js can automatically handle locale prefixes in URLs and redirect logic without requiring custom server code or middleware for the basic case. It also checks if you understand the difference between the App Router approach, where i18n is typically handled differently, and the Pages Router approach, which exposes a dedicated configuration key in next.config.js.

The full answer

A strong answer should mention that you export an i18n object from next.config.js. First, define a locales array that lists all supported locale codes such as en, fr, or de. Second, set a defaultLocale string that determines which locale is served when no prefix is present. Third, note the optional localeDetection boolean, which when true uses the Accept-Language header to redirect visitors automatically. Fourth, explain that this configuration alone enables subpath routing, meaning Next.js will serve pages at both /about and /en/about while redirecting or rewriting according to the default locale behavior.

The mistakes people make

A red flag is suggesting that you need to write custom rewrite rules in next.config.js or build middleware to manually prepend locale segments to every route. Another mistake is confusing the App Router file-system conventions with the Pages Router i18n config key, since the App Router does not use the same next.config.js i18n property for routing. Candidates also err by proposing to duplicate the entire page tree inside folders named after locales, which defeats the purpose of the built-in abstraction.

What usually comes next

An interviewer might ask how to switch locales on the client, which leads to discussing the next/link component and its locale prop. They could also ask how to handle locale-specific domain routing instead of subpaths, which requires adding a domains array inside the i18n configuration. Another common follow-up is how to manage translated content, where you might mention JSON dictionaries and a library like next-intl or react-i18next, or how to disable automatic locale detection for SEO consistency.

A concrete example

Imagine you are building a marketing site for Canada and France. In next.config.js, you would set module.exports to an object containing an i18n property with locales set to an array including en-CA and fr, defaultLocale set to en-CA, and localeDetection set to true. With this single config block, a visitor from France hitting the root path would be redirected to fr/about, while a Canadian visitor would remain on about or be redirected to en-CA/about depending on browser preferences. No manual route manipulation is required.

Interview question

In a Next.js application using the Pages Router, what is the correct way to enable automatic locale subpaths such as /fr/about?

  • a.Add a [lang] dynamic segment to the App Router root layout
  • b.Duplicate the pages directory inside locale folders such as pages/en and pages/fr
  • c.Create a middleware.ts file that prepends locale segments to all incoming requests
  • d.Export an i18n object from next.config.js with locales and defaultLocaleCorrect
Why?

The Pages Router enables automatic subpath routing when you export an i18n object from next.config.js containing locales and defaultLocale. Using middleware to prepend locales is a tempting distractor, but it is unnecessary because Next.js handles the routing automatically once the configuration is provided.

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.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.

See open roles