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

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.