скилл CX Codex

next-intl-app-router — скилл для Claude Code: i18n в Next.js App

Q: Как установить next-intl-app-router в Claude?

Выполните `npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code`. После этого файл скилла появится по пути `~/.claude/skills/next-intl-app-router/SKILL.md`.

Q: Чем отличается proxy.ts от middleware.ts?

В Next.js 16 файл перехвата называется `proxy.ts`, API остался прежним. В проектах на более старых версиях используется `middleware.ts`.

Настраивает next-intl с локалью в пути: конфиг, прокси, навигация и файлы сообщений. Пригодится, когда в проект добавляют второй язык.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code

Открыть на GitHub

Что делает next-intl-app-router

Скилл описывает подключение next-intl в проекте на Next.js App Router с префиксом локали в адресе — например, /en/about или /ja/about. Внутри разобраны шаги: плагин в next.config.ts, центральный конфиг src/i18n/routing.ts, загрузка сообщений в src/i18n/request.ts, прокси для перехвата маршрутов и обёртки навигации из src/i18n/navigation.ts.

Отдельно расписана структура каталогов: messages/en.json, messages/ja.json и папка src/app/[locale]/. Корневой layout.tsx не оборачивают в NextIntlClientProvider — это делают только в app/[locale]/layout.tsx, где локаль проверяют через hasLocale и вызывают setRequestLocale для статического рендера. В примерах есть готовые файлы, которые можно скопировать в проект.

Есть нюанс с версиями: в Next.js 16 файл middleware.ts заменён на proxy.ts, API тот же. Если у вас проект на более старой версии, имя файла придётся поправить, иначе перехват локалей не заработает. Ссылки и редиректы берите из @/i18n/navigation, а не из next/link и next/navigation — иначе локаль потеряется при переходе.

Какие задачи решает

добавить в проект второй язык с локалью в адресе
подключить плагин next-intl к next.config.ts
настроить перехват маршрутов и исключения для /api и статики
сделать ссылки и редиректы с сохранением текущей локали
разложить переводы по JSON-файлам и неймспейсам

Примеры запросов агенту

Настрой next-intl в этом проекте: локали en и ja, локаль в пути
Добавь страницу /about с переводом через next-intl
Проверь, что ссылки идут через @/i18n/navigation и локаль не теряется

Как установить next-intl-app-router

1Через Skills CLI (Vercel)

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code

2Вручную: положить файлы

~/.claude/skills/next-intl-app-router/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/next-intl-app-router/

1Через Skills CLI (Vercel)

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a codex

2Вручную: положить файлы

.agents/skills/next-intl-app-router/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a cursor

2Вручную: положить файлы

.cursor/skills/next-intl-app-router/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install liuchiawei/agent-skills next-intl-app-router

2Вручную: положить файлы

.github/skills/next-intl-app-router/SKILL.md

1Через Skills CLI (Vercel)

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a gemini-cli

2Командой платформы

gemini skills install https://github.com/liuchiawei/agent-skills --path skills/frontend/next-intl-app-router

Вручную: положить файлы

.devin/skills/next-intl-app-router/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о next-intl-app-router

Как установить next-intl-app-router в Claude?

Выполните npx skills add liuchiawei/agent-skills --skill next-intl-app-router -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/next-intl-app-router/SKILL.md.

Что делает next-intl-app-router?

Показывает, как подключить next-intl в Next.js App Router с локалью в пути: конфиг плагина, routing, request, прокси, навигация и файлы сообщений.

Чем отличается proxy.ts от middleware.ts?

В Next.js 16 файл перехвата называется proxy.ts, API остался прежним. В проектах на более старых версиях используется middleware.ts.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

next-intl-add-language официальный github Добавляет язык в Next.js-приложение с next-intl: переводит en.json и обновляет маршрутизацию. Нужен, когда новая локаль должна появиться в интерфейсе. 9 349установок nextjs-app-router-fundamentals wsimmonds Скилл ведёт агента по Next.js App Router: перенос с Pages Router, вложенные layout, метаданные, динамические маршруты. Пригодится при переходе на app/. CX Codex +1 2 200установок nextjs-app-router-patterns Seth Hobson Помогает строить приложения на Next.js App Router: выбирать режим рендеринга, организовывать маршруты и получать данные. Подойдёт при миграции с Pages Router или работе с Server Components. CX Codex 32 529установок nextjs-app-router giuseppe-trisciuoglio Даёт паттерны и примеры для Next.js 16+ с App Router: от Server Components до route.ts и кэширования. CX Codex +1 3 900установок nextjs-app-router-cursorrules-prompt-file PatrickJS Правило для Cursor, которое задаёт агенту привычки Next.js App Router: серверные компоненты по умолчанию, файловый роутинг, отдельные файлы для загрузки и ошибок. ★ 41 011звёзд репо nextjs-app-architecture aurorascharff Скилл задаёт единую архитектуру App Router в Next.js 16: страницы только компонуют, данные читают фичи. Пригодится при старте проекта и при разборе чужого кода. CX Codex +1 485установок