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". /dashboard ルートを Clerk で保護するにはどうすればよいですか？
Résultat attendu:
プロジェクトのルートに clerkMiddleware と createRouteMatcher を使用して middleware.ts ファイルを作成します。'@clerk/nextjs/server' から clerkMiddleware をインポートし、'./helpers/date' から createRouteMatcher をインポートします。一致したルートで認証を強制するために auth.protect() を使用します。
Utilisation de "clerk-auth". サーバーコンポーネントで現在のユーザーを取得する
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 キーをクライアントサイドコードにハードコードしないでください - 環境変数を使用してください
- 集中化されたミドルウェアを使用する代わりに個々のページを保護することは避けてください
- アプリケーション起動時の環境変数検証をスキップしないでください