# Clerk×Next.jsでSaaSの0→1をどこまで早くできるのか
> Clerkを使用してNext.jsアプリケーションを構築する方法を紹介し、組織の作成やメンバー招待、権限管理の機能を簡単に実装できることを説明しています。また、Clerkの登録方法やAPIキーの設定、ミドルウェアの更新手順、アプリへのClerkProviderの追加など、具体的な実装ステップを詳細に示しています。
- 公開日: 2025-10-31
- 著者: やました
- タグ: Clerk, ツール紹介
- URL: https://tech.anycloud.co.jp/articles/clerk-introduction
---
toB向けプロダクトでは、組織管理、メンバー招待、権限設定、クレジットカード登録といった機能が必要です。しかし、これらをフルスクラッチで開発するのは非常に大変で工数もかかります。そこで、これらの機能を一元的に提供してくれるサービスを探していた時にClerkというサービスを見つけました。
Clerkを使えば、必要な要件を満たしたSaaSを品質高いかつ素早く作れるのではと思い調べてみました。
## Clerkとは
[Clerk | Authentication and User Management](https://clerk.com/)
toB向けSaaSプロダクトを開発する際、以下のような機能実装が必須となります
- 組織・チーム管理機能
- メンバー招待と権限管理
- 決済情報の管理
- 認証・セキュリティ機能
これらの機能はSaaSとして基本的なものですが、一定以上の品質が求められます。そのため、必要な機能を揃えようとフルスクラッチで開発すると、膨大な工数がかかります。Clerkは、これらの機能を統合的に提供することで、開発チームがコア機能の開発に専念できる環境を提供します。
ClerkはSeries Cで$50Mの資金調達を完了しており、投資家にはa16z、Stripe、Anthropic's Anthology Fund、Vercel創業者、Auth0元CROなど、業界トップの投資家が名を連ねています。この強力なバックグラウンドは、長期的な安定性と継続的な機能開発を一定保証してくれているように感じます。
## セットアップ手順
以下、Next.jsプロジェクトにClerkを導入する手順を解説します。
### 1\. Clerkアカウントの作成
Clerk公式サイトでアカウントを作成し、ワークスペースとアプリケーションを設定します。
[https://clerk.com/](https://clerk.com/)
### 2\. Next.jsプロジェクトの作成
`npx create-next-app@latest [project-name] [options]`
### 3\. Clerkパッケージのインストール
`npm install @clerk/nextjs`
### 4\. API キーの設定
ClerkダッシュボードからAPIキーを取得し、`.env`ファイルに追加します。
```plaintext
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxxxxx
CLERK_SECRET_KEY=xxxxxx
```
### 5\. Middlewareの設定
プロジェクトルート(または`src/`ディレクトリ)に`middleware.ts`を作成し、認証と保護されたルートを設定します。
```typescript
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)(.*)',
],
};
```
### 6\. ClerkProviderの追加
`ClerkProvider`コンポーネントでアプリ全体をラップすることで、認証コンテキストをグローバルに利用可能にします。
`layout.tsx`に以下のコードを追加します。これにより、サインイン/サインアップ機能を持つヘッダーが自動的に作成されます。
```typescript
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}
)
}
```
### 7\. 動作確認
`npm run dev`を実行して開発サーバーを起動すると、ヘッダーにSign InとSign Upボタンが表示されます。
**アカウント登録フロー**
Sign Upボタンをクリックすると、Clerkが提供する洗練された認証UIが表示されます。メールアドレスとパスワードを入力後、メール認証を経て、わずか数ステップでアカウント登録が完了します。
**認証完了後の画面**
登録完了後、ヘッダーにはユーザーアイコンが表示され、アカウント管理機能にアクセスできるようになります。
**管理ダッシュボード**
Clerkの管理ダッシュボードでは、登録ユーザーの情報が即座に反映され、ユーザー管理、組織管理、セキュリティ設定などを一元管理できます。
このように、わずか数行のコード追加で、エンタープライズグレードの認証システムを実装できます。従来であれば数週間から数ヶ月かかる認証機能の開発を、数時間で完了できるのがClerkの最大の魅力です。
## 実装時に検証したポイント
ここからは、実際に検証して分かった「できること」と「できないこと」をまとめます。
### 組織管理機能:チーム作成からメンバー招待、権限設定まで
toBプロダクトにおいて、組織・チーム管理機能は必須要件です。Clerkでは以下の実装パターンが用意されています。
**1\. 既製UIコンポーネントを使う方法(最速)**
Clerkが提供する``と``コンポーネントを使用すれば、**コードわずか数行で組織作成画面を実装可能**です。デザインも洗練されており、MVPフェーズでは十分な品質です。
[https://clerk.com/docs/nextjs/reference/components/overview](https://clerk.com/docs/nextjs/reference/components/overview)
**2\. カスタムUIを実装する方法(柔軟性重視)**
独自デザインが必要な場合は、[useOrganizationList](https://clerk.com/docs/nextjs/reference/hooks/use-organization-list)と[useOrganization](https://clerk.com/docs/nextjs/reference/hooks/use-organization)というReact Hooksを使用することで、下記のように組織データを自由に取得・表示できます。
**メンバー招待機能**
useOrganizationフックから取得できる`organization.inviteMember()`メソッドを使用することで、メンバー招待機能も簡単に実装できます。招待メールの送信やアクセス権限の設定まで、Clerkが自動で処理してくれます。
初期MVPでは既製コンポーネントを使用して開発スピードを優先し、プロダクトの成長に伴い独自のブランディングが必要になった段階でカスタムUIへ移行できます。どちらの方法でも、エンタープライズグレードの組織管理機能を実装可能です。
### 2段階認証などの設定は可能か
toBプロダクトにおいて、セキュリティ要件は年々厳格化しており、2段階認証(MFA)は今や必須機能と言えます。特にエンタープライズ顧客との契約においては、セキュリティ監査で2段階認証の有無が問われることも少なくありません。
Clerkでの実装は可能ですが、**Pro Plan以上($25/月〜)が必要**です。Free Planでは2段階認証機能は利用できない点に注意が必要です。
ダッシュボードから数クリックで全ユーザーに対して2段階認証を強制することが可能です。開発工数はほぼゼロで、エンタープライズグレードのセキュリティ要件を満たせます。
[https://clerk.com/docs/guides/secure/force-mfa#enable-mfa-in-the-clerk-dashboard](https://clerk.com/docs/guides/secure/force-mfa#enable-mfa-in-the-clerk-dashboard)
初期のMVPフェーズではFree Planで開始し、エンタープライズ顧客との商談が本格化した段階でPro Planへアップグレードする戦略が現実的です。ただし、最初からエンタープライズ市場をターゲットにする場合は、Pro Plan前提での予算計画が必要になります。
### プランに応じた機能制限は可能か
toBのSaaSプロダクトでは、フリープランと有料プランで機能を出し分けるのは一般的な要件です。**Clerkではこれが実現可能です。**
[https://clerk.com/docs/nuxt/guides/billing/for-b2b](https://clerk.com/docs/nuxt/guides/billing/for-b2b)
**実装の流れ**
1. ダッシュボードからBilling機能を有効化
2. プランを作成(例:Free、Pro、Enterprise)
3. 機能(Feature)を定義し、各プランで利用可能な機能を設定
4. コード側でプランに応じた機能制限を実装
この仕組みにより、ユーザーのプランに応じた機能の出し分けや、アップグレードを促すUIの表示が可能になります。
**注意点:現在ベータ版**
ただし、公式ドキュメントにも記載されている通り、この機能は現在ベータ版です。本番運用する際は以下の点に注意が必要です:
> Billing is currently in Beta and its APIs are experimental and may undergo breaking changes. To mitigate potential disruptions, we recommend [pinning](https://clerk.com/docs/pinning) your SDK and `clerk-js` package versions.
APIが変更される可能性があるため、SDKとclerk-jsパッケージのバージョンを固定することが推奨されています。新規プロダクトで採用する場合は、この点を考慮し、代替手段(自前でのプラン管理実装)も検討しておくと安心です。
### UIのカスタマイズ性はどうか
カスタマイズは十分に可能です。Clerkはhooksを提供しているため、完全に自前でUIを実装できます。もちろん、[既存のUIコンポーネント](https://clerk.com/docs/nextjs/reference/components/overview)を使った実装も可能です。
また、shadcn/uiとも連携できるため、より洗練されたUIを素早く実装できます。
## まとめ
Clerkは、toBのSaaSプロダクト開発において認証・組織管理・決済機能を統合的に提供するプラットフォームです。既製のUIコンポーネントとReact Hooksにより、エンタープライズグレードの機能を短期間で実装できます。初期MVPではFree Planから始め、ビジネスの成長に応じてPro Plan($25/月〜)へアップグレードするのが現実的でしょう。
