▲ Next.js Intermediate

How does Next.js handle internationalization (i18n)?

Why Interviewers Ask This

This tests whether you can apply Next.js knowledge to real-world scenarios. Interviewers are looking for clarity of thought and evidence that you've encountered this in production code.

Answer

Next.js provides i18n support through routing and the next-intl or next-i18next libraries. Built-in i18n (Pages Router): configure in next.config.js: i18n: { locales: ["en", "fr", "es"], defaultLocale: "en", localeDetection: true }. Next.js adds locale to URLs: /en/about, /fr/about. Access locale in pages: const { locale } = useRouter(). App Router i18n with next-intl: (most popular library for App Router) Folder structure: app/[locale]/layout.tsx and app/[locale]/page.tsx — the locale is a dynamic route segment. Middleware routes to correct locale: // middleware.ts import createMiddleware from "next-intl/middleware"; export default createMiddleware({ locales: ["en", "fr"], defaultLocale: "en" });. Translation files: messages/en.json, messages/fr.json. Server Components: const t = await getTranslations("HomePage"); <h1>{t("title")}</h1>. Client Components: const t = useTranslations("HomePage");. URL strategies: path prefix (/en/about), domain (en.example.com), cookie/Accept-Language (no URL change). Currency/date formatting: use Intl API with the locale: new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(price). RTL support: detect RTL locales (Arabic, Hebrew) and set HTML dir attribute.

Pro Tip

This topic has Next.js-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.