# next-intl-app-router

Sets up next-intl with locale-prefixed routes: config, proxy, navigation and message files. Useful when a project gets a second language.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 601 installs · ★ 2
- Author: liuchiawei
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/liuchiawei/agent-skills/tree/HEAD/skills/frontend/next-intl-app-router/SKILL.md
- Updated: 2026-02-17
- HTML: https://affpapa.org/en/nevibecode/skills/next-intl-app-router

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/next-intl-app-router/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/next-intl-app-router/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/next-intl-app-router/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/next-intl-app-router/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install liuchiawei/agent-skills next-intl-app-router
```

2. **Manually: put the files in place**
- File: `.github/skills/next-intl-app-router/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/liuchiawei/agent-skills --path skills/frontend/next-intl-app-router
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/next-intl-app-router/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/liuchiawei/agent-skills/tree/HEAD/skills/frontend/next-intl-app-router/SKILL.md

## When to use it
- 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
- 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

## Similar
- [next-intl-add-language](https://affpapa.org/en/nevibecode/skills/next-intl-add-language.md) — skill · 9349 installs
- [nextjs-app-router-fundamentals](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-fundamentals.md) — skill · 2200 installs
- [nextjs-app-router-patterns](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-patterns.md) — skill · 32529 installs
- [nextjs-app-router](https://affpapa.org/en/nevibecode/skills/nextjs-app-router.md) — skill · 3900 installs
- [nextjs-app-router-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs-app-router-cursorrules-prompt-file.md) — rule · ★ 41011
- [nextjs-app-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-app-architecture.md) — skill · 485 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md