Scaling a Content Site to 5 Languages with Next.js + next-intl (Zero Manual Translation)

#nextjs #i18n #javascript #ai

Why Multi-Language?

I run a niche content site about NBA jerseys. Basketball is global — fans in China, Japan, Korea, and Latin America search for the same jerseys in their own languages. By adding 4 additional locales, I 5x'd my addressable search traffic overnight.

But manually translating 60+ articles into 4 languages? Not happening.

The Stack

Next.js 16 App Router
next-intl v4 for routing and message handling
MDX for content
Claude API for translation
Custom pipeline for batch processing

Architecture: Locale-First File Structure

content/
├── en/
│   └── jerseys/
│       └── michael-jordan/
│           └── bulls-pinstripe.mdx
├── zh/
├── ja/
├── ko/
└── es/

Each locale gets its own content directory. The English version is the source of truth.

Routing with next-intl

export const locales = ['en', 'zh', 'ja', 'ko', 'es'] as const;

export const routing = defineRouting({
  locales,
  defaultLocale: 'en',
  localePrefix: 'as-needed',
});

The as-needed prefix means English URLs stay clean while other locales get their prefix.

The Translation Pipeline

I built a batch translator that reads English MDX, checks which translations are missing, sends to Claude API, and writes translated files preserving frontmatter.