Internationalization (i18n)
Build multi-language support with dictionary-based translations and locale routing
For internationalization, I use a dictionary-based approach with JSON files for each language. This pattern works exceptionally well with Next.js App Router — the locale is detected from the URL path (e.g., /en, /th, /zh), and the appropriate dictionary is loaded server-side. I chose this over i18next because it's simpler, type-safe with TypeScript, and doesn't require additional runtime dependencies. The getDictionary function fetches the right translations, and TypeScript ensures you never miss a translation key.
I use a simple dictionary-based approach here for its simplicity and type-safety. You could also use next-intl, i18next, react-i18next, or Lingui for more advanced features like pluralization, interpolation, or translation management. The core pattern — locale detection from URL and loading appropriate translations — remains the same.
How it works
lib/
└── i18n/
├── config.ts # Locale configuration
├── get-dictionary.ts # Dictionary loader
└── dictionaries/
├── en.json # English translations
├── th.json # Thai translations
├── th.json # Thai translations
types/
└── dictionary.ts # TypeScript types
proxy.ts # Next.js 16+ locale redirect
app/
└── [lang]/
├── layout.tsx # Locale layout
└── page.tsx # Locale pageJSON Dictionaries
Store translations in JSON files for easy management and type-safety.
Middleware Redirect
Automatically redirect users to their preferred locale using middleware.
Type-Safe
Full TypeScript support with typed dictionary interface.
Server & Client
Works seamlessly with both Server and Client Components.
URL-Based Routing
Clean URLs with locale prefix (/en, /th) for SEO benefits.
Dynamic Import
Lazy load dictionaries to reduce initial bundle size.
Key Features
- •Dictionary-based translations (JSON files)
- •Dynamic locale routing (/th, /en, /zh)
- •Type-safe translations with TypeScript
- •SEO-friendly URL structure
- •Easy to add new languages
Live Example
Switch Language
Hello, World!
Welcome to our application