How does Next.js handle internationalization (i18n)?
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.
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?