Advanced i18n

Locale routing, translation management, RTL support, and date/number formatting.

Overview

Advanced i18n patterns handle complex multi-language requirements.

Key Concepts

Locale Detection — Automatic language detection
Translation Management — Organize and update translations
RTL Layouts — Right-to-left language support
Date Formatting — Locale-aware dates
Number Formatting — Currency and number localization

Code Examples

// lib/i18n.js
const dictionaries = {
  en: () => import('../locales/en.json').then(m => m.default),
  es: () => import('../locales/es.json').then(m => m.default),
  fr: () => import('../locales/fr.json').then(m => m.default)
};

export const getDictionary = async (locale) => {
  return dictionaries[locale]();
};

// app/[locale]/layout.js
export default async function Layout({ children, params }) {
  const dict = await getDictionary(params.locale);
  const dir = ['ar', 'he'].includes(params.locale) ? 'rtl' : 'ltr';

  return (
    <html lang={params.locale} dir={dir}>
      <body>
        <nav>
          {dict.navigation.map(item => (
            <a key={item.href} href={`/${params.locale}${item.href}`}>
              {item.label}
            </a>
          ))}
        </nav>
        {children}
      </body>
    </html>
  );
}

// Locale-aware date formatting
function FormattedDate({ date, locale }) {
  const formatted = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(new Date(date));

  return <time dateTime={date}>{formatted}</time>;
}

// Locale-aware number formatting
function FormattedPrice({ amount, currency, locale }) {
  const formatted = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(amount);

  return <span>{formatted}</span>;
}

Practice

Build a multi-language site with RTL support and locale-aware formatting.