next-intl-app-router — Claude Code skill: i18n for Next.js App Router
Sets up next-intl with locale-prefixed routes: config, proxy, navigation and message files. Useful when a project gets a second language.
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-codeWhat next-intl-app-router does
The skill walks through wiring next-intl into a Next.js App Router project where the locale sits in the path, like /en/about or /ja/about. It covers the plugin in next.config.ts, the central config in src/i18n/routing.ts, message loading in src/i18n/request.ts, a proxy that catches routes, and navigation wrappers from src/i18n/navigation.ts.
The file layout is spelled out too: messages/en.json, messages/ja.json and the src/app/[locale]/ folder. The root layout.tsx stays free of NextIntlClientProvider; only app/[locale]/layout.tsx wraps children, validates the locale with hasLocale and calls setRequestLocale for static rendering. Copy-paste examples ship with the skill.
One version detail matters. Next.js 16 renamed middleware.ts to proxy.ts, same API. On an older project you have to rename the file back, or locale interception never fires. Import Link and redirects from @/i18n/navigation rather than next/link or next/navigation, otherwise the locale drops on every click.
What it helps with
- add a second language with the locale in the URL
- wire the next-intl plugin into next.config.ts
- set up route matching with exclusions for /api and static files
- keep the current locale in links and redirects
- split translations into JSON files and namespaces
Example prompts for the agent
- Set up next-intl in this project with en and ja locales in the path
- Add an /about page that pulls its text from next-intl
- Check that links go through @/i18n/navigation so the locale survives
How to install next-intl-app-router
1Skills CLI (Vercel)
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code2Manually: put the files in place
~/.claude/skills/next-intl-app-router/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/next-intl-app-router/
1Skills CLI (Vercel)
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a codex2Manually: put the files in place
.agents/skills/next-intl-app-router/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a cursor2Manually: put the files in place
.cursor/skills/next-intl-app-router/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install liuchiawei/agent-skills next-intl-app-router2Manually: put the files in place
.github/skills/next-intl-app-router/SKILL.md1Skills CLI (Vercel)
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a gemini-cli2Platform CLI
gemini skills install https://github.com/liuchiawei/agent-skills --path skills/frontend/next-intl-app-routerManually: put the files in place
.devin/skills/next-intl-app-router/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about next-intl-app-router
How do I install next-intl-app-router in Claude?
Run npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code. The skill file then lands at ~/.claude/skills/next-intl-app-router/SKILL.md.
What does next-intl-app-router do?
It shows how to set up next-intl in a Next.js App Router project with locale-prefixed routes: plugin config, routing, request, proxy, navigation and message files.
How is proxy.ts different from middleware.ts?
Next.js 16 calls the interception file proxy.ts; the API is unchanged. Older projects still use middleware.ts.
