概要

Clerk認証でセッションが見つからない、または無効な場合のエラーです。

エラーメッセージ

``` Error: Clerk: auth() was called but Clerk cannot find the session. ```

原因

Middlewareの設定漏れ: ClerkMiddlewareが設定されていない
publicRoutesの設定ミス: 認証不要のルートが設定されていない
環境変数の欠落: Clerkのキーが設定されていない
Cookieの問題: サードパーティCookieのブロック

解決策

1. Middlewareを設定

```typescript // middleware.ts import { clerkMiddleware, createRouteMatcher } from ‘@clerk/nextjs/server’;

const isPublicRoute = createRouteMatcher([ ‘/’, ‘/sign-in(.)’, ‘/sign-up(.)’, ‘/api/public(.*)’, ]);

export default clerkMiddleware((auth, req) => { if (!isPublicRoute(req)) { auth().protect(); } });

export const config = { matcher: [’/((?!.\..|_next).)’, ‘/’, ‘/(api|trpc)(.)’], }; ```

2. 環境変数を設定

```bash

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx CLERK_SECRET_KEY=sk_test_xxx NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard ```

3. ClerkProviderを設定

```typescript // app/layout.tsx import { ClerkProvider } from ‘@clerk/nextjs’;

export default function RootLayout({ children }) { return ( {children} ); } ```

4. サーバーコンポーネントでの認証確認

```typescript // app/dashboard/page.tsx import { auth, currentUser } from ‘@clerk/nextjs/server’; import { redirect } from ’next/navigation’;

export default async function DashboardPage() { const { userId } = auth();

if (!userId) { redirect(’/sign-in’); }

const user = await currentUser();

return Welcome, {user?.firstName}; } ```

5. APIルートでの認証

```typescript // app/api/user/route.ts import { auth } from ‘@clerk/nextjs/server’; import { NextResponse } from ’next/server’;

export async function GET() { const { userId } = auth();

if (!userId) { return NextResponse.json({ error: ‘Unauthorized’ }, { status: 401 }); }

// 処理を続行 } ```

よくある間違い

middleware.tsの配置場所（appディレクトリではなくルート）
matcherパターンの誤り
NEXT_PUBLIC_プレフィックスの欠落

Clerk: Session not found

概要