Q1: How is i18n routing handled in the App Router?
Unlike the Pages Router, the App Router does not have built-in i18n configuration in next.config.js.
Pattern: You typically use a dynamic route segment [lang] at the root of your app directory to wrap all routes.
app/[lang]/page.js
This allows you to access the lang param in every layout and page to fetch the correct dictionary.
Q2: How do you detect and redirect the user to their preferred language?
Middleware: Use middleware.js to inspect the Accept-Language header or cookies.
If the URL is missing a locale (e.g., /about), the middleware determines the best locale (e.g., en-US) and redirects the user (e.g., to /en-US/about).
Q3: How do you handle translations in Server Components?
Since Server Components run on the server, you can load translation files (JSON) directly from the file system or a database without bundling them to the client.
const dictionaries = {
en: () => import('./dictionaries/en.json').then((module) => module.default),
nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}
export const getDictionary = async (locale) => dictionaries[locale]()