### 特徴ざっくりと、Clerk（クラーク）の特徴をまとめておきます。 - GCP や callback uri の設定不要 - 認証用 UI コンポーネント提供 - 二段階認証 OK - MAU 10,000 人まで無料 - クレジットカード登録不要 - PRO $25 - Next.js, React、Remix, Expo 対応。 :::discovery 実装環境は Next.js 15ですが、５分くらいで実装できました。UIも提供されているので開発が楽で早いです。小規模SaaSならこれでいいのでは？PROにすれば Clerk のロゴを外せます。 ::: ### 認証・認可サービス比較表他の競合サービスと比較してみました。比較対象はこちら。 - Supabase Auth - Better Auth - Clerk - Auth0 :::info izanami では、コンテンツ量が多い表は横にスクロールできます。 ::: | 項目 | Supabase Auth | Better Auth | Clerk | Auth0 | |--------------------------|------------------------------------|----------------------------------------|------------------------------------------|------------------------------------------| | 提供元 | Supabase | Vercel | Clerk Inc. | Okta（旧Auth0） | | 特徴 | FirebaseライクなBaaS認証 | Next.js App Router向けに最適化 | UI付き認証機能が豊富 | エンタープライズ向け高機能 | | 対応プロバイダー | Email, OAuth (Google, GitHub等) | Email, OAuth, Passkey | Email, OAuth, Passkey, SMS, Web3 | Email, OAuth, SMSなど多数 | | セッション管理 | サーバー／クライアント両対応 | App RouterとServer Action最適化 | 完全マネージド | 高度な設定が可能（やや複雑） | | UI コンポーネント | 無し（自作） | 無し（Next.jsと親和性高い） | 豊富（Drop-in UIあり） | 有料プランで提供 | | Next.js との親和性 | 高い（ただし若干古い実装あり） | フレームワーク非依存 | 高い（公式でサポート） | 中程度（App Routerは別途対応必要） | | Supabaseとの統合 | 完全統合（Auth, DB, Storage） | ×（独立） | ×（独立） | ×（独立） | | オープンソース | 一部OSS（クライアント/サーバー） | OSS | ×（プロプライエタリ） | ×（プロプライエタリ） | | RLS（行レベルセキュリティ）対応 | あり（DB連携で強力） | × | × | × | | 商用利用の価格帯 | 無料枠あり・月額課金制 | 無料 | 無料枠あり（10,000 MAU）PRO $25 | 無料枠あり・エンタープライズ向け高額 | | 特徴的な機能 | DBとの統合が強力、RLS、JWT | App Router & Server Actionに特化 | 多言語対応UI、ユーザーダッシュボード | 多要素認証、エンタープライズ統合 | | セキュリティ | RLS連携が前提で堅牢 | Next.jsのServer Action設計に依存 | 高水準、GDPR/CCPA対応 | 業界最高レベルのセキュリティ | | 使いやすさ | 自作が必要（やや玄人向け） | シンプルで実装早い | UI込みですぐ使える | 高機能だが設定が煩雑 | ### アカウント作成アカウント作成はこちら。GitHub、Google、メールで作成できます。 https://clerk.com/docs/quickstarts/setup-clerk ![GitHubで作成します](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/5c661c0e-60f5-4769-b7b7-301f8874c809.png) ![Authorize clerk を押して接続](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/cc08d5f6-c786-40cd-bb95-4cb3b408ac6d.png) ![Application name を入力し、サインインオプション選択](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/ef5b7bca-23d3-454b-9ddf-dfdf9cb68092.png) ![後はこれを入力していくだけ](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/57a9a6ba-66d5-4707-afb0-0ab1f988632b.png) 実装完了です。画面にログイン・ログアウトが表示されるので、ログインを押すと、画面遷移します。 ![](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/1e1040fe-5469-4b09-9f96-48cd54b7ac43.png) ![](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/bd67bcbf-c838-42fd-b2fd-3ea89ef66591.png) ![ログイン完了。ログアウトも簡単にできる](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/8ce9b3f9-a73c-4325-a65d-16a9829c3b41.png) ここまで５分です。管理画面でログイン者を管理できます。 ![ダッシュボード](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/fb108034-0e3a-41b4-9484-6744a07be5ce/2efee2f0-72d4-4360-a74d-8c5dca3bf01c.png) 次に、コード記述です。公式の通り。 ### @clerk/nextjs インストール次のコマンドを実行しSDK をインストール。 ```bash npm install @clerk/nextjs ``` ### .env 設定これらのキーを .env ファイルに追加するか、ファイルが存在しない場合は作成してください。これらのキーは API キーページからいつでも取得できます。 ```bash NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxx CLERK_SECRET_KEY=sk_test_xxxx ``` ### middleware.ts ```ts import { clerkMiddleware } from "@clerk/nextjs/server"; export default clerkMiddleware(); export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)", // Always run for API routes "/(api|trpc)(.*)", ], }; ``` ### laytout.tsx ```tsx import { type Metadata } from "next"; import { ClerkProvider, SignInButton, SignUpButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Clerk Next.js Quickstart", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children} ); } ``` ### next.config.js ```js /** @type {import('next').NextConfig} */ const nextConfig = {}; module.exports = nextConfig; ``` 全て設定したら `npm run dev` GO!!!! ### エラー middleware.ts の位置を間違えると以下のエラーが出ます。 ```bash [ Server ] Error: Clerk: clerkMiddleware() was not run, your middleware file might be misplaced. Move your middleware file to ./src/middleware.ts. Currently located at ./middleware.ts ``` これはClerkのミドルウェアファイルの配置場所に関する問題です。middleware.tsがプロジェクトのルートディレクトリにありますが、Next.jsのApp Routerではsrcディレクトリ内に配置する必要があります。

DiaryPal

認証・認可サービスの Clerk の設定手順