Clerk×Next.jsでSaaSの0→1をどこまで早くできるのか

公開日2025.10.31

PdM

やました

toB向けプロダクトでは、組織管理、メンバー招待、権限設定、クレジットカード登録といった機能が必要です。しかし、これらをフルスクラッチで開発するのは非常に大変で工数もかかります。そこで、これらの機能を一元的に提供してくれるサービスを探していた時にClerkというサービスを見つけました。

Clerkを使えば、必要な要件を満たしたSaaSを品質高いかつ素早く作れるのではと思い調べてみました。

Clerkとは
セットアップ手順
1. Clerkアカウントの作成
2. Next.jsプロジェクトの作成
3. Clerkパッケージのインストール
4. API キーの設定
5. Middlewareの設定
6. ClerkProviderの追加
7. 動作確認
実装時に検証したポイント
組織管理機能:チーム作成からメンバー招待、権限設定まで
2段階認証などの設定は可能か
プランに応じた機能制限は可能か
UIのカスタマイズ性はどうか
まとめ

Clerkとは

Clerk | Authentication and User Management

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/

2. Next.jsプロジェクトの作成

npx create-next-app@latest [project-name] [options]

3. Clerkパッケージのインストール

npm install @clerk/nextjs

4. API キーの設定

ClerkダッシュボードからAPIキーを取得し、.envファイルに追加します。

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxxxxx
CLERK_SECRET_KEY=xxxxxx

5. Middlewareの設定

プロジェクトルート(またはsrc/ディレクトリ)にmiddleware.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)(.*)',
  ],
};

6. ClerkProviderの追加

ClerkProviderコンポーネントでアプリ全体をラップすることで、認証コンテキストをグローバルに利用可能にします。

layout.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 (
    <ClerkProvider>
      <html lang="en">
        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
          <header className="flex justify-end items-center p-4 gap-4 h-16">
            <SignedOut>
              <SignInButton />
              <SignUpButton>
                <button className="bg-[#6c47ff] text-ceramic-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
                  Sign Up
                </button>
              </SignUpButton>
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

7. 動作確認

npm run devを実行して開発サーバーを起動すると、ヘッダーにSign InとSign Upボタンが表示されます。

アカウント登録フロー

Sign Upボタンをクリックすると、Clerkが提供する洗練された認証UIが表示されます。メールアドレスとパスワードを入力後、メール認証を経て、わずか数ステップでアカウント登録が完了します。

認証完了後の画面

登録完了後、ヘッダーにはユーザーアイコンが表示され、アカウント管理機能にアクセスできるようになります。

管理ダッシュボード

Clerkの管理ダッシュボードでは、登録ユーザーの情報が即座に反映され、ユーザー管理、組織管理、セキュリティ設定などを一元管理できます。

このように、わずか数行のコード追加で、エンタープライズグレードの認証システムを実装できます。従来であれば数週間から数ヶ月かかる認証機能の開発を、数時間で完了できるのがClerkの最大の魅力です。

実装時に検証したポイント

ここからは、実際に検証して分かった「できること」と「できないこと」をまとめます。

組織管理機能:チーム作成からメンバー招待、権限設定まで

toBプロダクトにおいて、組織・チーム管理機能は必須要件です。Clerkでは以下の実装パターンが用意されています。

1. 既製UIコンポーネントを使う方法(最速)

Clerkが提供する<OrganizationList />と<CreateOrganization />コンポーネントを使用すれば、コードわずか数行で組織作成画面を実装可能です。デザインも洗練されており、MVPフェーズでは十分な品質です。

https://clerk.com/docs/nextjs/reference/components/overview

2. カスタムUIを実装する方法(柔軟性重視)

独自デザインが必要な場合は、useOrganizationListとuseOrganizationという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

初期のMVPフェーズではFree Planで開始し、エンタープライズ顧客との商談が本格化した段階でPro Planへアップグレードする戦略が現実的です。ただし、最初からエンタープライズ市場をターゲットにする場合は、Pro Plan前提での予算計画が必要になります。

プランに応じた機能制限は可能か

toBのSaaSプロダクトでは、フリープランと有料プランで機能を出し分けるのは一般的な要件です。Clerkではこれが実現可能です。

https://clerk.com/docs/nuxt/guides/billing/for-b2b

実装の流れ

ダッシュボードからBilling機能を有効化
プランを作成(例:Free、Pro、Enterprise)
機能(Feature)を定義し、各プランで利用可能な機能を設定
コード側でプランに応じた機能制限を実装

この仕組みにより、ユーザーのプランに応じた機能の出し分けや、アップグレードを促すUIの表示が可能になります。

注意点:現在ベータ版

ただし、公式ドキュメントにも記載されている通り、この機能は現在ベータ版です。本番運用する際は以下の点に注意が必要です:

Billing is currently in Beta and its APIs are experimental and may undergo breaking changes. To mitigate potential disruptions, we recommend pinning your SDK and clerk-js package versions.

APIが変更される可能性があるため、SDKとclerk-jsパッケージのバージョンを固定することが推奨されています。新規プロダクトで採用する場合は、この点を考慮し、代替手段(自前でのプラン管理実装)も検討しておくと安心です。

UIのカスタマイズ性はどうか

カスタマイズは十分に可能です。Clerkはhooksを提供しているため、完全に自前でUIを実装できます。もちろん、既存のUIコンポーネントを使った実装も可能です。

また、shadcn/uiとも連携できるため、より洗練されたUIを素早く実装できます。

まとめ

Clerkは、toBのSaaSプロダクト開発において認証・組織管理・決済機能を統合的に提供するプラットフォームです。既製のUIコンポーネントとReact Hooksにより、エンタープライズグレードの機能を短期間で実装できます。初期MVPではFree Planから始め、ビジネスの成長に応じてPro Plan($25/月〜)へアップグレードするのが現実的でしょう。

記事を書いた人

PdM