Enterprise i18n at Scale

// Core i18n setup
next-intl 4.4.0         // Routing + translation management
Next.js 16.0.1          // App Router with [locale] dynamic segment
React 19.2.0            // Latest React with modern features
Payload CMS 3.62        // Headless CMS with built-in localization
TypeScript 5            // Type safety for translation keys
Tailwind CSS 4.0.9      // Styling framework

/                    → English (default)
/es                  → Spanish
/fr                  → French
/pt                  → Portuguese
/sw                  → Kiswahili
/hi                  → Hindi
/tl                  → Tagalog
/lg                  → Luganda
/yo                  → Yoruba

const messages = {
  homepage: (await import(`@/app/[locale]/_data/${locale}.json`)).default,
  aboutUs: (await import(`@/app/[locale]/about-us/_data/${locale}.json`)).default,
  contactUs: (await import(`@/app/[locale]/contact-us/_data/${locale}.json`)).default,
  blog: (await import(`@/app/[locale]/blog/_data/${locale}.json`)).default,
  // ... 38 pages total
  ...sharedMessages, // header, footer (no namespace prefix)
};

// app/[locale]/[...slug]/page.tsx
export async function generateStaticParams() {
  const locales = ['en', 'es', 'fr', 'pt', 'sw', 'hi', 'tl', 'lg', 'yo'];
  const pages = [
    'about-us',
    'contact-us',
    'blog',
    'faq',
    // ... 38 pages total
  ];

  // Generate all combinations
  return locales.flatMap(locale =>
    pages.map(page => ({
      locale,
      slug: page.split('/'),
    }))
  );
}

// Result: ~1,800 pages statically generated
// 9 locales × 38 pages × ~5 dynamic routes = 1,710+ pages

const posts = await payload.find({
  collection: 'posts',
  locale: params.locale,  // Indexed filter
  depth: 1,               // Prevent N+1
  select: {               // Only needed fields
    title: true,
    slug: true,
    publishedDate: true,
  },
  limit: 10,
});