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.

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.

Pages Router Configuration (next.config.js)

Pages Router Features

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.

App Router with next-intl - Installation

Step 1: Configure Routing (i18n/routing.ts)

Step 2: Create Request Configuration (i18n/request.ts)

Step 3: Middleware Setup (middleware.ts)

Step 4: Folder Structure

Step 5: Root Layout with Static Generation

Step 6: Using Translations

Alternative Libraries

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.

SEO Considerations

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 alternate language links
For static exports, use generateStaticParams to pre-render all locale variants

Question Loading...