# Next JS Internationalization I18N > Best practices for multi-language handling, locale routing, and detection middleware. Use when this capability is needed. - Skill: `tomevault-io/next-js-internationalization-i18n-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/next-js-internationalization-i18n-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/next-js-internationalization-i18n-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/next-js-internationalization-i18n-2 --- # Internationalization (i18n) ## **Priority: P2 (MEDIUM)** Use Sub-path Routing (`/en`, `/de`) and Server Components for translations. ## Principles 1. **Sub-path Routing**: Use URL segments (e.g., `app/[lang]/page.tsx`) to manage locales. - _Why_: SEO friendly, sharable, and cacheable. 2. **Server-Side Translation**: Load dictionary files (`en.json`) in Server Components. - _Why_: Reduces client bundle size. No huge JSON blobs sent to browser. 3. **Middleware Detection**: Use `middleware.ts` to detect `Accept-Language` headers and redirect users to their preferred locale. 4. **Type Safety**: Use robust typing for translation keys to prevent broken text UI. ## Implementation Pattern See [references/i18n_setup.md](references/i18n_setup.md) for Directory Structure, Middleware, and Server Component examples. ## Redirect Handling Strategy When handling redirects (Authentication, Legacy URLs) in an i18n app: - **Always preserve locale**: Use `redirect(`/${lang}/login`)` instead of just `/login`. - **Server Actions**: Return `redirect(...)` from actions. - **Next Config**: Use `next.config.js` for legacy SEO 301s (e.g., old-site `/about-us` -> `/en/about`). --- > Source: [fierzone/agent-skills-standard](https://github.com/fierzone/agent-skills-standard) — distributed by [TomeVault](https://tomevault.io).