Clerk Astro パターン

Clerk Astro パターン は何をしますか？

Clerkを使用したAstroのパターン — ミドルウェア、SSRページ、アイランドコンポーネント、APIルート、静的 vs SSRレンダリング。トリガー: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR。

使用例

1. ミドルウェアでルートを保護する

src/middleware.ts:

import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/account(.*)']);

export const onRequest = clerkMiddleware((auth, request) => {
  if (isProtectedRoute(request)) {
    auth().protect();
  }
});

2. SSRページでユーザーセッションを表示する

src/pages/dashboard.astro:

---
import { getAuth } from '@clerk/astro/server';
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
  // SSRが必要なので、動的ルートとして定義する
  return [];
}

export async function getServerSideProps() {
  const { userId } = await getAuth(Astro.request);
  if (!userId) {
    return Astro.redirect('/sign-in');
  }
  return { props: { userId } };
}
---

<Layout title="ダッシュボード">
  <h1>ダッシュボード</h1>
  <p>ユーザーID: {Astro.props.userId}</p>
</Layout>

3. アイランドコンポーネントで認証状態を使う

src/components/UserButton.astro:

---
import { SignedIn, SignedOut, UserButton } from '@clerk/astro/components';
---

<SignedIn>
  <UserButton afterSignOutUrl="/" />
</SignedIn>
<SignedOut>
  <a href="/sign-in">ログイン</a>
</SignedOut>

src/pages/index.astro:

---
import UserButton from '../components/UserButton.astro';
---

<UserButton client:load />

4. APIルートで認証をチェックする

src/pages/api/me.ts:

import type { APIRoute } from 'astro';
import { getAuth } from '@clerk/astro/server';

export const GET: APIRoute = async (context) => {
  const { userId } = await getAuth(context.request);
  
  if (!userId) {
    return new Response('認証されていません', { status: 401 });
  }
  
  return new Response(JSON.stringify({ userId }), {
    headers: { 'Content-Type': 'application/json' },
  });
};

5. 静的ページとSSRページを組み合わせる

astro.config.mjs:

import { defineConfig } from 'astro/config';
import clerk from '@clerk/astro';

export default defineConfig({
  integrations: [clerk()],
  output: 'hybrid', // 静的とSSRのハイブリッド
});

トリガーワード

• astro clerk
• clerk astro middleware
• astro protected page
• clerk island component
• astro API route auth
• clerk astro SSR