AIKraft/AI/Войти
AIKraft/Skills/Паттерны Clerk Next.js

Паттерны Clerk Next.js

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.

clerk official Другое

Что делает навык

Skill описывает продвинутые паттерны интеграции Clerk с Next.js, включая различия между серверной и клиентской аутентификацией, настройку middleware, защиту Server Actions и кэширование данных. Он помогает правильно использовать API Clerk в Server и Client компонентах, избегая типичных ошибок.

Когда применять

  • Определение, какой метод аутентификации использовать: await auth() для серверных компонентов или useAuth() для клиентских.
  • Настройка стратегии middleware (public-first или protected-first) для защиты роутов.
  • Защита Server Actions от несанкционированных мутаций с проверкой auth() в начале действия.
  • Реализация условного рендеринга и авторизации (по ролям, разрешениям, планам) с помощью компонента <Show>.
  • Получение токенов для внешних API (например, Hasura, Supabase) через getToken() с использованием JWT-шаблонов.

Как работает

  1. Импортируйте auth() из '@clerk/nextjs/server' для серверных компонентов и useAuth() из '@clerk/nextjs' для клиентских; никогда не смешивайте их.
  2. Используйте await auth() для получения свойств isAuthenticated, userId, sessionStatus; в Core 2 проверяйте !!userId вместо isAuthenticated.
  3. Для клиентского условного рендеринга применяйте компонент <Show> с пропсами feature, permission, plan или role, либо используйте <SignedIn>/<SignedOut> в Core 2.
  4. При работе с Server Actions или API роутами всегда вызывайте auth() в начале для проверки авторизации и защиты мутаций.
  5. Для кэширования данных включайте userId в ключ unstable_cache, чтобы избежать возврата данных не того пользователя.
  6. Используйте getToken() для получения JWT-токенов для внешних сервисов или verifyToken() для ручной проверки токенов на сторонних серверах.

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

Как правильно проверить аутентификацию пользователя в Server Component Next.js с помощью Clerk?
Пример использования компонента <Show> для отображения панели администратора только пользователям с ролью org:admin.
Как получить JWT-токен для отправки запроса к внешнему API Hasura из Server Component?

Что понадобится

  • Установленный пакет @clerk/nextjs (версия SDK проверяется в package.json)
  • Настроенный Clerk (базовая настройка описана в clerk-setup skill)
  • Переменные окружения для Clerk (например, CLERK_JWT_KEY, CLERK_PEM_PUBLIC_KEY)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «clerk-nextjs-patterns» из репозитория: # https://github.com/clerk/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r clerk-nextjs-patterns/ ~/.claude/skills/clerk-nextjs-patterns/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.