# nextjs-advanced-routing

Скилл для ИИ-агента, который разбирает продвинутый App Router в Next.js: серверные экшены, Route Handlers, параллельные и перехватывающие маршруты.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 334 установки · ★ 109
- Автор: wsimmonds
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wsimmonds/claude-nextjs-skills/tree/HEAD/nextjs-advanced-routing/SKILL.md
- Обновлён: 2025-10-24
- HTML: https://affpapa.org/nevibecode/skills/nextjs-advanced-routing

## Что делает

Скилл даёт агенту инструкции по продвинутым возможностям App Router: Route Handlers вместо старых API Routes, параллельные и перехватывающие маршруты, Server Actions, границы ошибок, draft mode и стриминг через Suspense. Отдельно разобраны формы и работа с cookies из клиентских компонентов.

Внутри — правила по типам и по структуре файлов. Агенту запрещено писать `any`: в проекте включено правило `@typescript-eslint/no-explicit-any`, и такой код уронит сборку. Для форм есть жёсткое требование: функция в `<form action={...}>` обязана возвращать void, поэтому возврат данных из неё TypeScript отклонит. Нужен ответ с ошибкой или сообщением — используйте `useActionState`. Файлы экшенов советует держать в `app/`: `action.ts` для одного обработчика, `actions.ts` для группы, рядом с вызывающим их UI.

Скилл рассчитан на проекты с App Router и включённым ESLint-правилом против `any`. Если в вашем проекте `any` разрешён или используется Pages Router, часть советов разойдётся с кодовой базой — это повод проверить конфиг до того, как агент начнёт править файлы.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/nextjs-advanced-routing/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/nextjs-advanced-routing/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/nextjs-advanced-routing/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/nextjs-advanced-routing/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install wsimmonds/claude-nextjs-skills nextjs-advanced-routing
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/nextjs-advanced-routing/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/wsimmonds/claude-nextjs-skills --path nextjs-advanced-routing
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/nextjs-advanced-routing/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wsimmonds/claude-nextjs-skills/tree/HEAD/nextjs-advanced-routing/SKILL.md

## Когда брать
- сделать API-эндпоинт через `route.ts` вместо старого API Routes
- написать форму на Server Actions и не сломать сборку возвратом данных
- открыть модалку на перехватывающем маршруте поверх текущей страницы
- показать превью черновика из CMS через draft mode
- развести серверные экшены и клиентские компоненты по разным файлам

## Примеры запросов агенту
- Добавь форму создания поста на Server Actions, файл `app/actions.ts`, без возврата данных из экшена
- Сделай эндпоинт `app/api/items/route.ts` с GET и POST
- Настрой перехватывающий маршрут, чтобы фото открывалось модалкой поверх ленты

## Похожие
- [nextjs-app-router](https://affpapa.org/nevibecode/skills/nextjs-app-router.md) — скилл · 3900 установок
- [nextjs-code-review](https://affpapa.org/nevibecode/skills/nextjs-code-review.md) — скилл · 3800 установок
- [nextjs-cache-architecture](https://affpapa.org/nevibecode/skills/nextjs-cache-architecture.md) — скилл · 5000 установок
- [nextjs-developer](https://affpapa.org/nevibecode/skills/nextjs-developer.md) — скилл · 5800 установок
- [clerk-nextjs-patterns](https://affpapa.org/nevibecode/skills/clerk-nextjs-patterns.md) — скилл · 53400 установок
- [nextjs-architecture-expert](https://affpapa.org/nevibecode/agents/nextjs-architecture-expert.md) — субагент · 4935 установок

Из того же набора: [wsimmonds/claude-nextjs-skills](https://affpapa.org/nevibecode/by/wsimmonds/claude-nextjs-skills.md) — 6 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md