# nextjs-app-architecture

Скилл задаёт единую архитектуру App Router в Next.js 16: страницы только компонуют, данные читают фичи. Пригодится при старте проекта и при разборе чужого кода.

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

## Что делает

Скилл ведёт агента по шагам: сначала выбрать режим — собрать приложение с нуля или провести аудит существующего, потом разложить работу по фичам, написать запросы и экшены, собрать компонент со скелетоном. Каждый шаг ссылается на справочник в `references/` — по фичам, запросам и экшенам, кэш-компонентам, одностраничным приложениям. Механику фреймворка скилл не пересказывает, а отправляет за ней в документацию Next.js.

Внутри 11 инвариантов, которым должно соответствовать любое изменение. Страницы и лейауты остаются синхронными через `params.then()`, фичи получают `id` или `slug` вместо сырых `params`, запросы лежат в `<domain>-queries.ts` с `import 'server-only'`, экшены — в `<domain>-actions.ts` с `'use server'`. Границу `<Suspense>` ставит страница, а скелетон живёт в том же файле, что и компонент.

Перед первым запуском нужно подготовить проект: скилл требует, чтобы у агента был доступ к документации под свою версию Next.js — через `AGENTS.md` или встроенные доки, и советует создать их, если их нет. Без этого шага агент будет опираться на память, а версии API в Next.js 16 расходятся с прежними. Часть ссылок ведёт на `preview.nextjs.org`, то есть на canary-API.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install aurorascharff/nextjs-app-architecture-skill nextjs-app-architecture
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/aurorascharff/nextjs-app-architecture-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture -a opencode
```

### Claude.ai

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

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

## Когда брать
- разложить страницы App Router по фичам, а не по маршрутам
- переписать страницу-загрузчик в асинхронный серверный компонент
- решить, где живут запросы, экшены и компоненты
- расставить границы Suspense и не потерять статичный каркас
- вынести скелетоны так, чтобы не прыгала вёрстка при загрузке

## Примеры запросов агенту
- проведи аудит app/ и покажи, где страницы сами делают запросы
- добавь фичу избранного по этой архитектуре
- включи Cache Components и расставь теги кэша для ленты

## Похожие
- [nextjs-architecture-expert](https://affpapa.org/nevibecode/agents/nextjs-architecture-expert.md) — субагент · 4935 установок
- [nextjs-app-router-fundamentals](https://affpapa.org/nevibecode/skills/nextjs-app-router-fundamentals.md) — скилл · 2200 установок
- [nextjs-cache-architecture](https://affpapa.org/nevibecode/skills/nextjs-cache-architecture.md) — скилл · 5000 установок
- [nextjs-app-router-patterns](https://affpapa.org/nevibecode/skills/nextjs-app-router-patterns.md) — скилл · 32529 установок
- [nextjs-app-router](https://affpapa.org/nevibecode/skills/nextjs-app-router.md) — скилл · 3900 установок
- [nextjs-app-router-cursorrules-prompt-file](https://affpapa.org/nevibecode/rules/nextjs-app-router-cursorrules-prompt-file.md) — правило · ★ 41011

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

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