clerk-install-auth
Clerk SDK/CLIの認証をインストール・設定します。 新しいClerk統合のセットアップ、APIキーの設定、またはプロジェクトへのClerk初期化に使用します。 「clerk をインストール」「clerk をセットアップ」「clerk 認証」「clerk API キーを設定」「プロジェクトに clerk を追加」といったフレーズで実行できます。
description の原文を見る
Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
SKILL.md 本文
Clerk インストール & 認証
概要
Clerk SDKをセットアップし、アプリケーションの認証認証情報を設定します。
前提条件
- Node.js 18以上（Next.js、React、Express等）
- パッケージマネージャー（npm、pnpmまたはyarn）
- APIアクセス権限付きのClerkアカウント
- Clerkダッシュボードから取得したPublishableキーとSecretキー
手順
ステップ1: SDKをインストール
# Next.js
npm install @clerk/nextjs
# React
npm install @clerk/clerk-react
# Express/Node.js
npm install @clerk/express
# Remix
npm install @clerk/remix
ステップ2: 環境変数を設定
# .env.localファイルを作成
cat >> .env.local << 'EOF'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
EOF
ステップ3: ClerkProviderを追加（Next.js App Router）
// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
ステップ4: ミドルウェアを追加
// middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()
export const config = {
matcher: [
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
'/(api|trpc)(.*)',
],
}
ステップ5: 接続を確認
import { auth } from '@clerk/nextjs/server'
export async function GET() {
const { userId } = await auth()
return Response.json({ authenticated: !!userId })
}
出力
- node_modulesにSDKパッケージをインストール
- .env.localに環境変数を設定
- アプリケーションをClerkProviderでラップ
- ルートを保護するミドルウェア
エラーハンドリング
| エラー | 原因 | 解決策 |
|---|---|---|
| Invalid API Key | キーが不正またはミスマッチ | Clerkダッシュボードのキーが環境変数と一致していることを確認 |
| ClerkProvider Missing | プロバイダー外でSDKを使用 | アプリケーションのルートをClerkProviderでラップ |
| Middleware Not Running | マッチャーが誤設定 | middleware.tsのマッチャー正規表現を確認 |
| Module Not Found | インストール失敗 | npm install @clerk/nextjsを再度実行 |
例
Next.js App Router セットアップ
// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>
<header>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}
React SPA セットアップ
import { ClerkProvider } from '@clerk/clerk-react'
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
function App() {
return (
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<Router />
</ClerkProvider>
)
}
リソース
次のステップ
認証が成功した後、最初の認証リクエストのために clerk-hello-world に進みます。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- Brmbobo
- リポジトリ
- Brmbobo/Web2podcast
- ライセンス
- MIT
- 最終更新
- 2026/1/26
Source: https://github.com/Brmbobo/Web2podcast / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。