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.
Previous
What is the Next.js App Router folder structure and special files?
Next
What is the difference between Static and Dynamic rendering in Next.js App Router?
More Next.js Questions
View all →- Intermediate How does Next.js caching work in the App Router?
- Intermediate What are Server Components vs Client Components trade-offs?
- Intermediate What is React Suspense and streaming in Next.js?
- Intermediate How do you implement authentication in Next.js?
- Intermediate What is Next.js App Router data fetching patterns?