LogoفارسیFA

Internationalization in Next.js – Multilingual Routing, Dynamic Localization, and Static Rendering

Next.js supports internationalization by enabling dynamic routing and localized content for multiple languages. This article explains how to detect the user’s locale, redirect based on language preferences, load translation dictionaries, and generate static pages for each locale.

InternationalizationLocaleTranslationgenerateStaticParams

~2 min read · Updated Oct 28, 2025

Terminology


  • Locale: An identifier for language and regional formatting preferences
  • en-US: English (United States)
  • nl-NL: Dutch (Netherlands)
  • nl: Dutch (generic)

Internationalized Routing


To select the correct locale, use the browser’s Accept-Language header. Libraries like @formatjs/intl-localematcher and Negotiator help determine the preferred language:

let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'

match(languages, locales, defaultLocale) // -> 'en-US'

Locale-Based Redirects


In proxy.js, redirect users based on their locale:

export function proxy(request) {
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (pathnameHasLocale) return

  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  return NextResponse.redirect(request.nextUrl)
}

Folder Structure in app/


To support multiple languages, nest files under app/[lang]. This allows the router to pass the lang parameter to layouts and pages:

export default async function Page({ params }) {
  const { lang } = await params
  return ...
}

Loading Translations


Use separate dictionaries for each language:

// dictionaries/en.json
{ "products": { "cart": "Add to Cart" } }

// dictionaries/nl.json
{ "products": { "cart": "Toevoegen aan Winkelwagen" } }

Define a getDictionary function to load translations:

export const getDictionary = async (locale: 'en' | 'nl') =>
  dictionaries[locale]()

In your page:

const dict = await getDictionary(lang)
return <button>{dict.products.cart}</button>

Static Rendering for Locales


Use generateStaticParams to generate static pages for each language:

export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}

In the layout:

<html lang={(await params).lang}>
  <body>{children}</body>
</html>

Conclusion


Internationalization in Next.js enables multilingual experiences through dynamic routing, translation loading, and static generation. With proper folder structure and locale detection, you can build scalable, global-ready applications.


Written & researched by Dr. Shahin Siami

Related Articles

Advanced Client-Side Routing and Performance Hooks in Next.js

Next.js provides a rich set of client-side hooks and caching utilities that empower developers to build dynamic, responsive, and secure applications. From reading route parameters to tracking navigation state and reporting performance metrics, this guide walks you through the most important tools available in the App Router.

Continue

Handling Authorization and Caching in Next.js: A Developer’s Guide

Next.js introduces powerful experimental features for access control and smart caching. This guide covers the unauthorized() function for custom 401 handling, unstable_cache for persistent memoization, updateTag for instant cache invalidation, and useLinkStatus for inline navigation feedback. Learn how to use these tools to build secure, performant, and responsive applications.

Continue

redirect and refresh in Next.js — Smart Redirects and Client Refreshing via Server Actions

The redirect function in Next.js allows you to navigate users to a new route, returning either a 307 or 303 HTTP response depending on context. It works in Server Components, Client Components, Route Handlers, and Server Actions. The refresh function is used exclusively within Server Actions to refresh the client router. This article explains how both functions work, with practical examples and key considerations.

Continue

NextRequest and NextResponse in Next.js — Managing Cookies, Headers, Redirects, and Rewrites

Next.js extends the native Web Request and Response APIs with NextRequest and NextResponse, offering powerful tools for managing cookies, headers, redirects, rewrites, and JSON responses. These utilities simplify server-side logic and improve control over routing, personalization, and security. This guide walks through their capabilities with practical examples and best practices.

Continue

headers, ImageResponse, notFound, and permanentRedirect in Next.js — Request Handling, Dynamic Images, Errors, and Redirects

Next.js offers powerful tools for handling HTTP requests and responses in Server Components. The headers function lets you read incoming request headers. ImageResponse allows you to generate dynamic images using JSX and CSS. The notFound function renders a custom 404 page, and permanentRedirect enables permanent redirection to another route. This article explains how to use each feature with practical examples.

Continue

A Complete Guide to Using metadata and generateMetadata in Next.js

In modern versions of Next.js, managing page metadata is more powerful and intuitive than ever. Metadata is automatically injected into the <head> of your pages and plays a vital role in SEO, social sharing, and user experience. This guide explains the two main ways to define metadata: using the static metadata object and the dynamic generateMetadata function.

Continue
Previous ArticleNext Article