特徴
ざっくりと、Clerk（クラーク）の特徴をまとめておきます。
- GCP や callback uri の設定不要
- 認証用 UI コンポーネント提供
- 二段階認証 OK
- MAU 10,000 人まで無料
- クレジットカード登録不要
- PRO $25
- Next.js, React、Remix, Expo 対応。
実装環境は Next.js 15ですが、５分くらいで実装できました。UIも提供されているので開発が楽で早いです。小規模SaaSならこれでいいのでは？PROにすれば Clerk のロゴを外せます。
認証・認可サービス比較表
他の競合サービスと比較してみました。比較対象はこちら。
- Supabase Auth
- Better Auth
- Clerk
- Auth0
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、メールで作成できます。
実装完了です。画面にログイン・ログアウトが表示されるので、ログインを押すと、画面遷移します。
ここまで５分です。管理画面でログイン者を管理できます。
次に、コード記述です。公式の通り。
@clerk/nextjs インストール
次のコマンドを実行しSDK をインストール。
.env 設定
これらのキーを .env ファイルに追加するか、ファイルが存在しない場合は作成してください。これらのキーは API キーページからいつでも取得できます。
middleware.ts
laytout.tsx
next.config.js
全て設定したら npm run dev GO!!!!
エラー
middleware.ts の位置を間違えると以下のエラーが出ます。
これはClerkのミドルウェアファイルの配置場所に関する問題です。middleware.tsがプロジェクトのルートディレクトリにありますが、Next.jsのApp Routerではsrcディレクトリ内に配置する必要があります。
