clerk-auth
Next.js に Clerk 認証を追加する
このスキルは、ミドルウェア保護、サーバーコンポーネント認証、ユーザー管理ワークフローを含む、Next.js アプリケーションでの Clerk 認証の実装に関する専門的なパターンを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「clerk-auth」を使用しています。 /dashboard ルートを Clerk で保護するにはどうすればよいですか？
期待される結果:
プロジェクトのルートに clerkMiddleware と createRouteMatcher を使用して middleware.ts ファイルを作成します。'@clerk/nextjs/server' から clerkMiddleware をインポートし、'./helpers/date' から createRouteMatcher をインポートします。一致したルートで認証を強制するために auth.protect() を使用します。
「clerk-auth」を使用しています。 サーバーコンポーネントで現在のユーザーを取得する
期待される結果:
@clerk/nextjs/server から { auth, currentUser } をインポートします。auth() を呼び出してユーザー ID とセッションデータを取得するか、currentUser() を呼び出してプロフィール情報を含む完全な User オブジェクトを取得します。
セキュリティ監査
低リスクStatic 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.
高リスクの問題 (1)
品質スコア
作れるもの
Next.js ルートの保護
Clerk ミドルウェアを使用して特定のルートまたはルートグループに認証保護を追加する
サーバーサイド認証の実装
Next.js サーバーコンポーネントでユーザー認証データにアクセスし、パーソナライズされたコンテンツを提供する
ユーザーオンボーディングフロー
Clerk の事前構築済みコンポーネントを使用してサインインおよびサインアップページを設定する
これらのプロンプトを試す
Next.js 14 アプリケーションで Clerk 認証を設定するのを手伝ってください。ClerkProvider を設定し、環境変数を追加する必要があります。
Clerk の clerkMiddleware を使用して /dashboard および /admin ルートを保護する middleware.ts ファイルを作成してください。
Next.js サーバーコンポーネントで現在のユーザーを取得し、その名前を表示する方法を示してください。
Clerk の SignIn コンポーネントを使用して、独自のスタイリングでカスタムサインインページを作成してください。
ベストプラクティス
- 集中化された認証ロジックのために、プロジェクトルートで clerkMiddleware を設定する
- 柔軟なルートグループ保護のために createRouteMatcher を使用する
- ミドルウェア設定でパブリックルートと保護されたルートを明確に区別する
回避
- API キーをクライアントサイドコードにハードコードしないでください - 環境変数を使用してください
- 集中化されたミドルウェアを使用する代わりに個々のページを保護することは避けてください
- アプリケーション起動時の環境変数検証をスキップしないでください