Next.js i18n Setup (nextjs-i18n-setup)
Bootstrap and scaffold next-intl into an existing Next.js App Router project using modern next/root-params, dynamic segment app/[locale]/, and Next.js 16+ (proxy.ts) / Next.js <=15 (middleware.ts).
[!TIP] Boilerplate & Templates: Consult
references/templates.mdfor full drop-in code templates when scaffolding files. Fast Execution: Delegate verification to a lightweight subagent (Model: 'flash').
1. Architectural Rules & Requirements
- Metadata Contract: Ensure
docs/project.jsoncontains:"dictionaries_dir": "messages", "dictionary_file_pattern": "[locale].json" - Next.js Version Interceptor:
- Next.js 16+: Use
proxy.ts(orsrc/proxy.ts). Migrate and remove any legacymiddleware.ts. - Next.js <=15: Use
middleware.ts(orsrc/middleware.ts).
- Next.js 16+: Use
- Modern Root Params: Use
next/root-params(await rootParams.locale()) ini18n/request.ts. DeprecatedrequestLocaleandsetRequestLocale()are forbidden. - Navigation: Export
Link,redirect,usePathname,useRouterfromi18n/navigation.ts(pure TypeScript, zero JSX). - Static Generation: Root layout
app/[locale]/layout.tsxMUST exportgenerateStaticParams()returning{ locale }for all supported locales.
2. Setup Checklist
- Step 0: Audit: Check
docs/project.json(supported_languages) and Next.js version inpackage.json. - Step 1: Install: Run
<pkg_mgr> add next-intl(pnpm add next-intl). - Step 2: Config Metadata: Ensure
dictionaries_dir: "messages"indocs/project.json. - Step 3: Routing: Create
i18n/routing.tsusingdefineRouting(see templates). - Step 4: Request Handler: Create
i18n/request.tsusingnext/root-params(see templates). - Step 5: Navigation Helpers: Create
i18n/navigation.ts(see templates). - Step 6: Next Plugin: Wrap
next.config.tswithcreateNextIntlPlugin()(see templates). - Step 7: Interceptor: Create
proxy.ts(Next 16+) ormiddleware.ts(Next <=15) with asset filtering matcher (see templates). - Step 8: Starter Dictionaries: Ensure
messages/[locale].jsonexists for all supported locales with matching baseline keys. - Step 9: Migrate Layout & Routes: Move top-level routes to
app/[locale]/. Configure dynamicdir,lang,generateStaticParams, and<NextIntlClientProvider>(see templates). - Step 10: Type Augmentation: Declare
AppConfig.Messagesinglobal.d.ts(see templates). - Step 11: Navigation Imports: Update internal links across existing components to use
@/i18n/navigation. - Step 12: Verification: Run verification script and build:
pwsh .agents/skills/nextjs-i18n-setup/scripts/verify-setup.ps1 -Quiet pnpm run build
3. Setup Execution Report Template
## 🌐 Next.js i18n Setup Execution Report
| Step / Component | Target File(s) | Status | Notes |
| :----------------- | :--------------------------- | :------------------------------ | :----------------------- |
| **Package** | `package.json` (`next-intl`) | `[IMPLEMENTED]` / `[UNTOUCHED]` | Installed runtime |
| **Project Config** | `docs/project.json` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Configured messages dir |
| **Routing** | `i18n/routing.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Locales & default |
| **Request** | `i18n/request.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | next/root-params |
| **Navigation** | `i18n/navigation.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Pure TS helpers |
| **Plugin** | `next.config.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | withNextIntl wrapped |
| **Interceptor** | `proxy.ts` / `middleware.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Route matcher |
| **Dictionaries** | `messages/[locale].json` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Starter dictionaries |
| **Layout** | `app/[locale]/layout.tsx` | `[IMPLEMENTED]` / `[UNTOUCHED]` | Static params & provider |
| **Types** | `global.d.ts` | `[IMPLEMENTED]` / `[UNTOUCHED]` | AppConfig augmentation |
| **Verification** | `verify-setup.ps1` & build | `[PASSED]` | Clean build |