Internationalization

Multi-language support, locale routing, translation files, and RTL layouts.

Overview

Next.js supports internationalization with locale-based routing.

Key Concepts

Locale Routing — /en/about, /es/about patterns
Middleware — Detect and redirect to locale
Translation Files — JSON files for each language
RTL Support — Right-to-left language layouts
Date/Number Formatting — Locale-aware formatting

Code Examples

// middleware.js
import { NextResponse } from 'next/server';

const locales = ['en', 'es', 'fr'];
const defaultLocale = 'en';

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  
  // Check if path has locale
  const hasLocale = locales.some(locale => pathname.startsWith(`/${locale}`));
  
  if (!hasLocale) {
    // Detect user's preferred locale
    const acceptLanguage = request.headers.get('accept-language');
    const preferredLocale = acceptLanguage?.split(',')[0]?.split('-')[0] || defaultLocale;
    
    return NextResponse.redirect(
      new URL(`/${preferredLocale}${pathname}`, request.url)
    );
  }
}

// lib/i18n.js
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

const translations = { en, es, fr };

export function getTranslation(locale) {
  return translations[locale] || translations[defaultLocale];
}

// app/[locale]/layout.js
export default async function Layout({ children, params }) {
  const t = await getTranslation(params.locale);
  
  return (
    <html lang={params.locale} dir={params.locale === 'ar' ? 'rtl' : 'ltr'}>
      <body>
        <nav>
          <a href="/en">{t.nav.home}</a>
          <a href="/es">{t.nav.about}</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

Practice

Build a multi-language website with locale routing and RTL support.