How to implement internationalisation in nextJS?

Question

Accepted Answer

Internationalization in Next.js involves handling both routing (URL structure) and localization (translated content). The implementation approach differs between the Pages Router (with built-in i18n support) and the App Router (which requires external libraries or custom middleware). The goal is to serve content in multiple languages with proper URL structures, locale detection, and SEO optimization. For Pages Router projects, Next.js provides built-in internationalized routing since version 10.0.0. You configure supported locales in next.config.js, and Next.js automatically handles locale detection, URL prefixing, and redirections. This is the simplest approach for applications still using the Pages Router. // next.config.js module.exports = { i18n: { locales: ['en-US', 'fr', 'nl-NL'], defaultLocale: 'en-US', localeDetection: true } } Sub-path routing: `/fr/blog` or `/nl-NL/blog` with default locale having no prefix Domain routing: Map different domains to different locales (example.fr, example.nl) Automatic locale detection via `Accept-Language` header and optional `NEXT_LOCALE` cookie Access locale via `useRouter()` or `getStaticProps` context Link component supports `locale` prop for switching languages HTML `lang` attribute automatically set The App Router does not include built-in i18n routing, so external libraries are needed. The `next-intl` library is the recommended solution, providing comprehensive i18n support with middleware, routing, and Server Component compatibility. It integrates with Next.js's dynamic route segments and supports static rendering. npm install next-intl import { defineRouting } from 'next-intl/routing'; import { createNavigation } from 'next-intl/navigation'; export const routing = defineRouting({ locales: ['en', 'fr', 'es'], defaultLocale: 'en', localePrefix: 'as-needed' // Removes prefix for default locale }); export const { Link, redirect, usePathname, useRouter } = createNavigation(routing); import { getRequestConfig } from 'next-intl/server'; import { routing } from './routing'; export default getRequestConfig(async ({ requestLocale }) => { let locale = await requestLocale; if (!locale || !routing.locales.includes(locale as any)) { locale = routing.defaultLocale; } return { locale, messages: (await import(`../../messages/${locale}.json`)).default }; }); import createMiddleware from 'next-intl/middleware'; import { routing } from './i18n/routing'; export default createMiddleware(routing); export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'] }; app/ └── [locale]/ ├── layout.tsx ├── page.tsx └── about/ └── page.tsx messages/ ├── en.json ├── fr.json └── es.json import { routing } from '@/i18n/routing'; import { setRequestLocale } from 'next-intl/server'; import { notFound } from 'next/navigation'; export function generateStaticParams() { return routing.locales.map((locale) => ({ locale })); } export default async function RootLayout({ children, params }: { children: React.ReactNode; params: Promise<{ locale: string }>; }) { const { locale } = await params; if (!routing.locales.includes(locale as any)) notFound(); setRequestLocale(locale); return ( {children} ); } // Server Component import { getTranslations } from 'next-intl/server'; export default async function HomePage() { const t = await getTranslations('HomePage'); return

{t('title')}

; } // Client Component 'use client'; import { useTranslations } from 'next-intl'; export default function HomePage() { const t = useTranslations('HomePage'); return

{t('title')}

; } **next-i18n-router**: Lightweight middleware-based solution that adds internationalized routing back to the App Router. Provides locale detection, cookie support, and works with react-i18next or react-intl. **next-loc**: Modern localization solution with TypeScript support, global dictionaries, translation deduplication, and compression. Includes middleware and context providers for easy setup. **next-i18next**: Popular choice for Pages Router apps using i18next framework (requires react-i18next for App Router migration) Structure translation files by namespaces to load only what's needed per page, minimizing client-side JavaScript. Organize JSON files per locale (e.g., `en/common.json`, `en/about.json`). Use `pick()` to send only required namespaces to `NextIntlClientProvider`. For Server Components, leverage server-side translations to avoid sending translation logic to the client. Set HTML `lang` and `dir` (for RTL languages) attributes for proper accessibility and SEO. Next.js automatically adds `lang` attribute to HTML when using built-in i18n or next-intl Add `hreflang` meta tags manually for language variants using `next/head` Use `generateMetadata` with dynamic locales for localized page titles and descriptions Generate localized sitemaps with

How to implement internationalisation in nextJS?

Implement internationalization (i18n) in Next.js by combining either built-in Pages Router routing or third-party libraries for the App Router, along with structured translation files and middleware for locale detection.

Scenario Questions

Follow-up Questions