clerk-auth
Next.js에 Clerk 인증 추가
이 스킬은 Next.js 애플리케이션에서 Clerk 인증을 구현하기 위한 전문가 패턴을 제공합니다. 미들웨어 보호, 서버 컴포넌트 인증, 사용자 관리 워크플로우를 포함합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "clerk-auth". How do I protect my /dashboard route with Clerk?
Résultat attendu:
clerkMiddleware와 createRouteMatcher를 사용하여 프로젝트 루트에 middleware.ts 파일을 만드세요. '@clerk/nextjs/server'에서 clerkMiddleware를, './helpers/date'에서 createRouteMatcher를 가져오세요. auth.protect()를 사용하여 일치하는 라우트에서 인증을 적용하세요.
Utilisation de "clerk-auth". Get current user in Server Component
Résultat attendu:
'@clerk/nextjs/server'에서 { auth, currentUser }를 가져오세요. auth()를 호출하여 사용자 ID와 세션 데이터를 가져오거나, currentUser()를 호출하여 프로필 정보가 포함된 전체 User 객체를 가져오세요.
Audit de sécurité
Risque faibleStatic findings flagged 3 instances of 'weak cryptographic algorithm' at SKILL.md lines 3, 16, and 60. Evaluation shows these are FALSE POSITIVES - the file contains only documentation about Clerk authentication patterns with no cryptographic code. Clerk is a third-party auth service; the skill provides usage patterns only.
Problèmes à risque élevé (1)
Score de qualité
Ce que vous pouvez construire
Next.js 라우트 보호
Clerk 미들웨어를 사용하여 특정 라우트 또는 라우트 그룹에 인증 보호 추가
서버측 인증 구현
개인화된 콘텐츠를 위해 Next.js 서버 컴포넌트에서 사용자 인증 데이터 접근
사용자 온보딩 플로우
Clerk의 사전 구축된 컴포넌트로 로그인 및 회원가입 페이지 설정
Essayez ces prompts
Next.js 14 애플리케이션에서 Clerk 인증을 설정하는 것을 도와주세요. ClerkProvider를 구성하고 환경 변수를 추가해야 합니다.
Clerk의 clerkMiddleware를 사용하여 /dashboard 및 /admin 라우트를 보호하는 middleware.ts 파일을 만들어주세요.
Next.js 서버 컴포넌트에서 현재 사용자를 가져오고 이름을 표시하는 방법을 보여주세요.
나만의 스타일로 Clerk의 SignIn 컴포넌트를 사용하여 사용자 정의 로그인 페이지를 만들어주세요.
Bonnes pratiques
- 중앙 집중식 인증 논리를 위해 프로젝트 루트에서 clerkMiddleware를 구성하세요
- 유연한 라우트 그룹 보호를 위해 createRouteMatcher를 사용하세요
- 미들웨어 구성에서 공개 라우트와 보호된 라우트를 명확하게 분리하세요
Éviter
- API 키를 클라이언트 측 코드에 하드코딩하지 마세요 - 환경 변수를 사용하세요
- 중앙 집중식 미들웨어 대신 개별 페이지를 보호하는 것을 피하세요
- 애플리케이션 시작 시 환경 변수 검증을 건너뛰지 마세요