メニュー
Use to add drop-in authentication (sign-in/up, sessions, orgs, user button) to a Next.js/React app and protect server code.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Rikinshah787/agent-skills-production-skills --skill clerkコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use to build with Claude through the Messages API, including streaming, system prompts, token controls, and schema-validated tool use.
Use to build and deploy edge functions/APIs with Wrangler, and bind KV, R2, and D1 storage to your Worker.
Use to containerize an app with a Dockerfile — small, secure, cache-friendly images via multi-stage builds — and build/run/push them.
| name | clerk |
| title | Clerk |
| category | Payments & Auth |
| description | Use to add drop-in authentication (sign-in/up, sessions, orgs, user button) to a Next.js/React app and protect server code. |
| tags | ["auth","authentication","sessions","nextjs","organizations","users"] |
| official_docs | https://clerk.com/docs |
| sources | ["https://clerk.com/docs/quickstarts/nextjs","https://clerk.com/docs/references/nextjs/clerk-middleware","https://clerk.com/docs/references/nextjs/read-session-data"] |
| last_verified | 2026-08-10T00:00:00.000Z |
Drop-in authentication and user management: prebuilt UI components, hosted sign-in/up, sessions, and organizations, wired into Next.js middleware and server helpers.
<SignIn/>, <UserButton/>).npx -y clerk@latest init
# writes NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to .env.local
npm install @clerk/nextjs
# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_... # SERVER ONLY — never expose in client code
// Next.js 16+: name the file proxy.ts | Next.js <=15: name it middleware.ts (contents identical)
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)(.*)",
"/__clerk/(.*)",
],
};
<body>)// app/layout.tsx
import { ClerkProvider, SignInButton, SignUpButton, Show, UserButton } ;
() {
(
);
}
auth() is async — always await)import { auth, currentUser } from "@clerk/nextjs/server";
export default async function Page() {
const { userId } = await auth(); // fast: just the ID / claims
if (!userId) return <p>Sign in first.</p>;
const user = await currentUser(); // full user object (extra fetch)
return <p>Hello {user?.firstName}</p>;
}
import { auth } from "@clerk/nextjs/server";
export async function POST() {
const { userId } = await auth();
if (!userId) return new Response("Unauthorized", { status: 401 });
// ...do the protected work
}
"use client";
import { useUser, useAuth } from "@clerk/nextjs";
export function Profile() {
const { isLoaded, isSignedIn, user } = useUser();
if (!isLoaded) return null;
return isSignedIn ? <span>{user.fullName}</span> : <span>Signed out</span>;
}
CLERK_SECRET_KEY / NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in the host.proxy.ts 16+, middleware.ts ≤15).CLERK_ENCRYPTION_KEY (openssl rand --hex 32) if you pass a dynamic secretKey to middleware.@clerk/nextjs (not @clerk/clerk-react) in Next.js apps.CLERK_SECRET_KEY authenticates your backend to Clerk — never expose it in client code or NEXT_PUBLIC_*.authorizedParties in middleware to defend against subdomain cookie-leak attacks.| Symptom | Likely cause | Fix |
|---|---|---|
auth() ... Promise / undefined userId | Forgot to await | const { userId } = await auth() |
| Auth not applied on some routes | Middleware matcher too narrow | Use the recommended matcher incl. `/(api |
ClerkProvider errors / hydration issues | Provider wrapping <html> | Put <ClerkProvider> inside <body> |
| Works in dev, breaks in prod | Still using dev keys / domain | Create prod instance, set live keys + domain |
| Secret key leaked to client | Used NEXT_PUBLIC_ for secret | Keep secret server-side only |