clerk-nextjs-skills — скилл для Claude Code: Clerk в Next.js 16
Подключает аутентификацию Clerk в Next.js 16 с App Router: proxy.ts, переменные окружения, защита маршрутов и MCP-сервер.
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-codeЧто делает clerk-nextjs-skills
Скилл ведёт агента по шагам установки Clerk в проект на Next.js 16. Внутри — порядок действий: поставить @clerk/nextjs через pnpm, создать proxy.ts в корне или в /src, прописать ключи в .env.local и обернуть приложение в ClerkProvider в app/layout.tsx.
Отдельный блок посвящён переезду с Next.js 15: файл middleware.ts просто переименовывается в proxy.ts, код остаётся тем же, потому что функция clerkMiddleware() от имени файла не зависит. Если маршруты вдруг не защищаются, скилл советует проверить расположение proxy.ts и сбросить кеш через rm -rf .next && pnpm dev.
Есть раздел про MCP-сервер на базе @vercel/mcp-adapter и @clerk/mcp-tools с маршрутом app/[transport]/route.ts. Учтите: clerkMiddleware() по умолчанию оставляет все маршруты публичными, поэтому защиту нужно включать через auth.protect(). Для работы понадобятся publishable и secret ключи из панели Clerk.
Какие задачи решает
- поднять аутентификацию Clerk в свежем проекте на Next.js 16
- перенести
middleware.tsнаproxy.tsбез переписывания кода - закрыть маршруты от неавторизованных через
auth.protect() - проверить наличие обязательных переменных окружения до запуска
- собрать MCP-сервер с проверкой токена Clerk
Примеры запросов агенту
- Настрой Clerk в моём Next.js 16 проекте с App Router
- Помоги переехать с
middleware.tsнаproxy.ts - Добавь защиту маршрута через
auth.protect()и выведи данные пользователя
Как установить clerk-nextjs-skills
1Через Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-code2Вручную: положить файлы
~/.claude/skills/clerk-nextjs-skills/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/clerk-nextjs-skills/
1Через Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a codex2Вручную: положить файлы
.agents/skills/clerk-nextjs-skills/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a cursor2Вручную: положить файлы
.cursor/skills/clerk-nextjs-skills/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install gocallum/nextjs16-agent-skills clerk-nextjs-skills2Вручную: положить файлы
.github/skills/clerk-nextjs-skills/SKILL.md1Через Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a gemini-cli2Командой платформы
gemini skills install https://github.com/gocallum/nextjs16-agent-skills --path skills/clerk-nextjs-skillsВручную: положить файлы
.devin/skills/clerk-nextjs-skills/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора3
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о clerk-nextjs-skills
Как установить clerk-nextjs-skills в Claude?
Выполните npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-code. Файл скилла появится по пути ~/.claude/skills/clerk-nextjs-skills/SKILL.md.
Что делает clerk-nextjs-skills?
Проводит агента через подключение Clerk к Next.js 16: зависимости, proxy.ts, переменные окружения, ClerkProvider в layout, защита маршрутов и сборка MCP-сервера.
Почему маршруты остаются открытыми после установки Clerk?
clerkMiddleware() по умолчанию не защищает маршруты. Нужен явный вызов auth.protect() — в конкретной странице или в proxy.ts для всех сразу.
