next-best-practices — скилл для Claude Code: правила Next.js
Скилл с набором правил Next.js: файловые конвенции, границы RSC, async API, метаданные, обработка ошибок. Пригодится, когда агент пишет или ревьюит код на Next.js.
npx skills add pedronauck/skills --skill next-best-practices -a claude-codeЧто делает next-best-practices
Скилл включается, когда агент пишет или проверяет код Next.js, и подсказывает ему, как правильно. Внутри — набор справочных файлов по темам: структура проекта и специальные файлы, динамические и catch-all сегменты маршрутов, параллельные и перехватывающие маршруты. Отдельно разобрано переименование middleware в v16.
Есть разделы про границы React Server Components: как отловить async-клиентский компонент, несериализуемые пропсы, исключения в Server Actions. Дальше — async-паттерны Next.js 15+, включая асинхронные params, searchParams, cookies() и headers(), и кодмод для миграции. Про выбор рантайма сказано коротко: по умолчанию Node.js, Edge — когда он уместен.
Остальные файлы закрывают обработку ошибок (error.tsx, global-error.tsx, not-found.tsx, redirect, notFound, forbidden, unauthorized), паттерны работы с данными и борьбу с водопадами через Promise.all и Suspense, route handlers, метаданные и OG-картинки через next/og, оптимизацию изображений и шрифтов, бандлинг, скрипты, ошибки гидратации, Suspense-границы и self-hosting с output: 'standalone'. Скилл не вызывается вручную: в его настройках стоит user-invocable: false, поэтому он подхватывается сам в подходящем контексте.
Какие задачи решает
- поймать async-клиентский компонент до того, как он сломает сборку
- перевести проект на асинхронные
paramsиcookies()в Next.js 15+ - разобраться, когда нужен route handler, а когда Server Action
- убрать водопад запросов через
Promise.allи Suspense - настроить OG-картинки и метаданные без ручных тегов
Примеры запросов агенту
- Проверь этот компонент на корректные границы RSC и скажи, что не так
- Перепиши страницу под асинхронные
paramsиsearchParams - Почему у меня ошибка гидратации в этом компоненте?
Как установить next-best-practices
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill next-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/next-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/next-best-practices/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill next-best-practices -a codex2Вручную: положить файлы
.agents/skills/next-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill next-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/next-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills next-best-practices2Вручную: положить файлы
.github/skills/next-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill next-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedronauck/skills --path skills/curated/next-best-practicesВручную: положить файлы
.devin/skills/next-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill next-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о next-best-practices
Как установить next-best-practices в Claude Code?
Выполните npx skills add pedronauck/skills --skill next-best-practices -a claude-code. Файл скилла окажется по пути ~/.claude/skills/next-best-practices/SKILL.md.
Что делает next-best-practices?
Даёт агенту правила написания и ревью кода Next.js: файловые конвенции, границы RSC, async API, метаданные, обработка ошибок, оптимизация изображений и шрифтов, бандлинг.
Можно вызвать этот скилл вручную?
Нет. В его настройках указано user-invocable: false, так что он срабатывает сам, когда агент работает с кодом Next.js.