Covers [locale]-prefixed routing, localized navigation components (Link, redirect, usePathname, useRouter), date/number/currency/relative-time formatting, RTL language support, SEO hreflang tags, and localized special files ([locale]/error.tsx, [locale]/not-found.tsx, global-error.tsx). This is the Next.js-specific i18n skill (App Router routing, proxy.ts integration) — for plain React apps without Next.js see react-i18n, and for Astro see astro-i18n.
Next.js 16 Internationalization
Complete i18n solution with next-intl or DIY dictionary approach.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- explore-codebase - Analyze existing i18n setup and message files
- research-expert - Verify latest next-intl docs via Context7/Exa
- mcp__context7__query-docs - Check locale config and patterns
After implementation, run sniper for validation.
Overview
When to Use
- Building multilingual Next.js 16 applications
- Need locale-based routing with
[locale] dynamic segment
- Implementing language switcher and URL localization
- Formatting dates, numbers, currencies, and relative times per locale
- SEO optimization with hreflang tags and localized metadata
- Supporting right-to-left (RTL) languages
Why next-intl
| Feature |
Benefit |
| App Router native |
Full Server Components support |
| Type-safe messages |
TypeScript autocompletion for keys |
| ICU MessageFormat |
Pluralization, gender, select expressions |
| Async message loading |
Load translations on-demand per locale |
| proxy.ts compatible |
Works with Next.js 16 proxy pattern |
| Rich formatting |
Dates, numbers, lists, relative time |
Two Approaches
1. next-intl (Recommended)
Full-featured library with routing, formatting, and type safety. Best for production applications needing comprehensive i18n support.
2. DIY Dictionary
Lightweight approach using dynamic imports for simple translation needs. Good for projects wanting minimal dependencies.
SOLID Architecture
Module Structure
All i18n code organized in modules/cores/i18n/:
- config/ - Routing configuration, locale definitions
- interfaces/ - TypeScript types for messages and locales
- services/ - Request handlers, message loaders
- messages/ - JSON translation files per locale
File Locations
src/modules/cores/i18n/src/config/routing.ts - Locale routing configsrc/modules/cores/i18n/messages/en.json - English translationssrc/modules/cores/i18n/messages/fr.json - French translationsproxy.ts - Locale detection and redirect logic
Routing Patterns
Locale Segment
All routes prefixed with [locale] dynamic segment:
/en/about → English about page/fr/about → French about page/ → Redirects to default locale
Navigation Components
Use localized navigation from next-intl for automatic locale handling:
- Link - Locale-aware anchor links
- redirect - Server-side locale redirect
- usePathname - Current path without locale
- useRouter - Programmatic navigation
Reference Guide
| Need |
Reference |
| Initial setup |
installation.md, routing-setup.md |
| Route config |
routing-config.md, middleware-proxy.md |
| Translations |
translations.md, messages-validation.md |
| Formatting |
formatting.md |
| Components |
server-components.md, client-components.md |
| Navigation |
navigation.md |
| TypeScript |
typescript.md |
| SEO |
seo.md |
| Testing |
testing.md |
| DIY approach |
diy-dictionaries.md, diy-locale-detection.md |
Message Formatting
ICU MessageFormat
- Pluralization -
{count, plural, one {# item} other {# items}}
- Select -
{gender, select, male {He} female {She} other {They}}
- Rich text - Support for bold, italic, links in messages
Formatters
- formatDate - Locale-aware date formatting
- formatNumber - Currency, percentages, decimals
- formatList - Conjunction/disjunction lists
- formatRelativeTime - "2 hours ago", "in 3 days"
Best Practices
- Type-safe keys - Use TypeScript for message key autocompletion
- Namespace messages - Organize by feature/page for maintainability
- Server-first - Load translations on server, avoid client bundles
- SEO hreflang - Add alternate links for all locales
- RTL support - Use
dir attribute for right-to-left languages
- Fallback locale - Configure default for missing translations
Error Handling
Special Files
Localized error and loading states require specific handling:
[locale]/error.tsx - Localized error boundary[locale]/not-found.tsx - Localized 404 pageglobal-error.tsx - Root error fallback
See error-files.md for complete patterns.
1---2name: nextjs-i18n-23description: Use when implementing i18n in Next.js 16 — next-intl or DIY dictionaries, locale routing, language switch, or formatters.4---56<objective>7Implements internationalization for Next.js 16 App Router apps via two approaches: next-intl (recommended — full Server Components support, type-safe messages, ICU MessageFormat, async message loading, proxy.ts-compatible routing) or a lightweight DIY dictionary approach using dynamic imports.89Covers `[locale]`-prefixed routing, localized navigation components (Link, redirect, usePathname, useRouter), date/number/currency/relative-time formatting, RTL language support, SEO hreflang tags, and localized special files (`[locale]/error.tsx`, `[locale]/not-found.tsx`, `global-error.tsx`). This is the Next.js-specific i18n skill (App Router routing, proxy.ts integration) — for plain React apps without Next.js see react-i18n, and for Astro see astro-i18n.10</objective>1112# Next.js 16 Internationalization1314Complete i18n solution with next-intl or DIY dictionary approach.1516## Agent Workflow (MANDATORY)1718Before ANY implementation, use `TeamCreate` to spawn 3 agents:19201. **explore-codebase** - Analyze existing i18n setup and message files212. **research-expert** - Verify latest next-intl docs via Context7/Exa223. **mcp__context7__query-docs** - Check locale config and patterns2324After implementation, run **sniper** for validation.2526---2728## Overview2930### When to Use3132- Building multilingual Next.js 16 applications33- Need locale-based routing with `[locale]` dynamic segment34- Implementing language switcher and URL localization35- Formatting dates, numbers, currencies, and relative times per locale36- SEO optimization with hreflang tags and localized metadata37- Supporting right-to-left (RTL) languages3839### Why next-intl4041| Feature | Benefit |42|---------|---------|43| App Router native | Full Server Components support |44| Type-safe messages | TypeScript autocompletion for keys |45| ICU MessageFormat | Pluralization, gender, select expressions |46| Async message loading | Load translations on-demand per locale |47| proxy.ts compatible | Works with Next.js 16 proxy pattern |48| Rich formatting | Dates, numbers, lists, relative time |4950---5152## Two Approaches5354### 1. next-intl (Recommended)5556Full-featured library with routing, formatting, and type safety. Best for production applications needing comprehensive i18n support.5758### 2. DIY Dictionary5960Lightweight approach using dynamic imports for simple translation needs. Good for projects wanting minimal dependencies.6162---6364## SOLID Architecture6566### Module Structure6768All i18n code organized in `modules/cores/i18n/`:6970- **config/** - Routing configuration, locale definitions71- **interfaces/** - TypeScript types for messages and locales72- **services/** - Request handlers, message loaders73- **messages/** - JSON translation files per locale7475### File Locations7677- `src/modules/cores/i18n/src/config/routing.ts` - Locale routing config78- `src/modules/cores/i18n/messages/en.json` - English translations79- `src/modules/cores/i18n/messages/fr.json` - French translations80- `proxy.ts` - Locale detection and redirect logic8182---8384## Routing Patterns8586### Locale Segment8788All routes prefixed with `[locale]` dynamic segment:8990- `/en/about` → English about page91- `/fr/about` → French about page92- `/` → Redirects to default locale9394### Navigation Components9596Use localized navigation from next-intl for automatic locale handling:9798- **Link** - Locale-aware anchor links99- **redirect** - Server-side locale redirect100- **usePathname** - Current path without locale101- **useRouter** - Programmatic navigation102103---104105## Reference Guide106107| Need | Reference |108|------|-----------|109| Initial setup | [installation.md](references/installation.md), [routing-setup.md](references/routing-setup.md) |110| Route config | [routing-config.md](references/routing-config.md), [middleware-proxy.md](references/middleware-proxy.md) |111| Translations | [translations.md](references/translations.md), [messages-validation.md](references/messages-validation.md) |112| Formatting | [formatting.md](references/formatting.md) |113| Components | [server-components.md](references/server-components.md), [client-components.md](references/client-components.md) |114| Navigation | [navigation.md](references/navigation.md) |115| TypeScript | [typescript.md](references/typescript.md) |116| SEO | [seo.md](references/seo.md) |117| Testing | [testing.md](references/testing.md) |118| DIY approach | [diy-dictionaries.md](references/diy-dictionaries.md), [diy-locale-detection.md](references/diy-locale-detection.md) |119120---121122## Message Formatting123124### ICU MessageFormat125126- **Pluralization** - `{count, plural, one {# item} other {# items}}`127- **Select** - `{gender, select, male {He} female {She} other {They}}`128- **Rich text** - Support for bold, italic, links in messages129130### Formatters131132- **formatDate** - Locale-aware date formatting133- **formatNumber** - Currency, percentages, decimals134- **formatList** - Conjunction/disjunction lists135- **formatRelativeTime** - "2 hours ago", "in 3 days"136137---138139## Best Practices1401411. **Type-safe keys** - Use TypeScript for message key autocompletion1422. **Namespace messages** - Organize by feature/page for maintainability1433. **Server-first** - Load translations on server, avoid client bundles1444. **SEO hreflang** - Add alternate links for all locales1455. **RTL support** - Use `dir` attribute for right-to-left languages1466. **Fallback locale** - Configure default for missing translations147148---149150## Error Handling151152### Special Files153154Localized error and loading states require specific handling:155156- `[locale]/error.tsx` - Localized error boundary157- `[locale]/not-found.tsx` - Localized 404 page158- `global-error.tsx` - Root error fallback159160See [error-files.md](references/error-files.md) for complete patterns.
fusengine