こんにちは！今回は、「Clerk」を使ってBolt.newのプロジェクトに認証機能を実装する方法をご紹介します。
Clerkは認証・ユーザー管理プラットフォームで、サインインやサインアップフォームを簡単に実装できるUIコンポーネントを提供しています。ユーザー管理機能も備えており、ユーザーに関する機能全般を簡単に実装することができます。
本記事では、Bolt.newで生成したプロジェクトにClerkのサインインUIコンポーネントを実装する方法を紹介します。コードの修正はGitHub、デプロイにはVercelを使用するので、ClerkだけでなくGitHubとVercelについて知りたい方もぜひご参考ください。
- 1. Clerk概要紹介
- 2. Bolt.new✕Clerk✕Vercel連携手順
- 3. テスト
- 4. まとめ
1. Clerk概要紹介
1.1. 概要
Clerkは、Webアプリやモバイルアプリ向けの認証・ユーザー管理機能を提供するプラットフォームです。サインイン・サインアップやユーザーに関するUIコンポーネントを提供しており、数行のコードで自分のプロジェクトに認証機能を組み込むことができます。また、管理者用ダッシュボードも備えており、権限の管理・付与も可能です。
1.1.1. 主な機能
- 認証…メール・パスワード認証や電話番号認証、Google、GitHub、Slack等のOAuth認証を簡単に実装できます。
- UIコンポーネント…サインインやユーザー情報編集などのClerk独自のUIコンポーネントを利用できます。
- ユーザー管理…サインアップしたユーザーはデフォルトではClerkのデータベースに保存されます。ダッシュボードでユーザーの確認やユーザー情報の編集、ユーザー新規作成を行うことができます。
その他、APIを使用して自前のUIの構築や外部データベースとの連携ができます。また、ログイン状態の保持やセッションの制御、ユーザーの権限の管理も簡単に行うことができます。
Clerkで利用できるUIコンポーネントは下記のドキュメントを参照してください。
1.1.2. 料金プラン
ClerkにはFreeプラン（無料）とProプラン（$25/月）の2つの基本プランと、Proプランに追加できる認証やユーザー管理に関する有料アドオンがあります。
Freeプランは10,000MAUまで無料で利用できます。10,000MAUを超える場合はProプランで従量課金が発生します。アドオンには、多要素認証等を利用できるようになる「Enhanced authentication add-on」（$100/月）と、強化権限や監査ログ（未実装）等を利用できるようになる「Enhanced administration add-on」（$100/月）があります。
類似のユーザー認証・管理プラットフォームとして「Auth0」がありますが、Auth0では25,000MAUまで無料で利用できます。2つのサービスを比較するとClerkは小規模なアプリやプロトタイプ向けと言えます。用途に合わせて検討してみてください。
1.2. ダッシュボード
Clerkのダッシュボードの概要を紹介していきます。
ダッシュボードはClerkに登録するアプリごとに利用できます。Overview、Users、Organizations、Configureの4画面があり、画面上部のナビゲーションで各画面を切り替えます。
1.2.1. Overview
Overviewでは、このアプリのユーザーの利用状況が表示されます。
1.2.2. Users
Usersは、このアプリで登録されているユーザーの確認・登録ができる画面です。各ユーザーの詳細画面からは、登録情報やClerkにおけるUser IDも確認できます。
1.2.3. Organizations
Organizationsは、組織とその権限を作成し管理する画面です。
組織を作成するには、Configure > Organization managementで組織を有効化します。
1.2.4. Configure
Configureは、アプリに関する詳細を設定できる画面です。ユーザー一覧に保存するデータ（ユーザー名、電話番号、メールアドレス等）や多要素認証、セッション管理等のユーザーや認証に関する項目や、API key等開発に必要な情報の確認や設定を行うことができます。
2. Bolt.new✕Clerk✕Vercel連携手順
それでは、Bolt.newのプロジェクトにClerkコンポーネントを実装しデプロイする手順を紹介していきます。
2.1. 本記事の目標・大まかな手順
本記事では下記を目標に実際の手順をご紹介していきます。
- Clerkのサインインコンポーネントをプロジェクトに実装する
- Clerkと連携したプロジェクトをデプロイする
実装の手順は下記の通りです。
- ステップ1：Clerkで連携設定
- ステップ2：Bolt.newでプロジェクトを生成
- ステップ3：StackBlitzを経由してGitHubにプッシュ
- ステップ4：GitHubでClerkを実装
- ステップ5：Vercelにデプロイ
上記に記載の通り、本記事ではBolt.new、StackBlitz、GitHub、Vercelを使用します。それぞれ新規登録を行っていない場合は登録をしておいてください。
2.1.1. デプロイ先の検討
Bolt.newはNetlifyに直接デプロイできますが、Netlifyへのデプロイ方法は過去の記事でご紹介しているので本記事ではデプロイ先としてVercelを選択しました。数あるデプロイ環境からVercelを選択したのは、ClerkとVercelの相性が良いためです。
Clerkはクロスオリジンのiframe環境では動作が制限されるようになっています。そのため、StackBlitzやBolt.newといったブラウザ上の仮想環境（iframe内でアプリを実行する環境）ではClerkの認証APIに正しくアクセスできず正常に機能しないという問題が発生します。
一方で、Vercelはiframe環境ではないためClerkの機能を問題なく利用できます。また、VercelはNext.jsの開発元が提供するホスティングサービスでもあり、ClerkのNext.js SDKとスムーズに統合できる点も大きなメリットです。
以上のことから本記事ではデプロイ先にVercelを選択しています。よろしければご参考ください。
▼参考（Netlifyへのデプロイ手順）
2.2. ステップ1：Clerkで連携設定
まずはClerkを実装するための準備を行います。
2.2.1. Clerkサインアップ
下記からClerkのサインアップページにアクセスして登録します。今回はGitHubアカウント連携で登録しました。
2.2.2. サインインコンポーネント構築
アカウント登録が完了すると、早速アプリの登録とサインインコンポーネント構築が始まります。ここでは、Clerkと統合するアプリ名とサインインオプションを設定します。サインインオプションではEmailや電話番号、Google、GitHubの他、DiscordやSlack、LINE、Box等も選択することができます。
今回は下記の内容で設定しました。
- アプリ名…
Clerk Test - サインインオプション…Email、Google
この画面の右側で実際のサインインコンポーネントのUIを確認しながら設定できます。
問題なければ、「Create application」をクリックします。
これで新規登録とアプリの登録、サインインコンポーネントの構築は完了です。ダッシュボードが表示されます。ユーザーが登録されるまでは、Overviewではフレームワーク選択とClerkをアプリに導入するための手順が表示されます。
2.2.3. ClerkのAPI keyを確認
今回は2つのAPI keyを使用します。ClerkのダッシュボードでConfigure > Developers > API keysを開き、下記を確認してコピーしておきます。
| Key | Value |
|---|---|
| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Publishable key |
| CLERK_SECRET_KEY | Secret keysのいずれか（デフォルトで作成されているdefaultでも可） |
2.3. ステップ2：Bolt.newでプロジェクトを生成
Clerkを導入するプロジェクトをBolt.newで作成します。Bolt.newについての詳細は下記の記事をご参考ください。
2.3.1. プロジェクト生成
今回構築するのは、サインイン画面でサインイン後、トップ画面に遷移するようなシンプルなアプリです。下記のプロンプトを参考にアプリを生成してください。
Next.js（TypeScript）で、サインイン画面と、サインイン後に遷移するトップ画面を持つシンプルなアプリを作成してください。 **機能:** - `/signin` にサインイン画面を作成。空欄でOK。 - `/` に保護されたトップ画面を作成 - サインイン後に自動でトップ画面へリダイレクト - 未ログインの場合、トップ画面にアクセスするとサインイン画面へリダイレクト - Tailwind CSS を使用して基本的なスタイリング **フォルダ構成:** - `/app`（Next.jsのApp Router構成） - `/app/signin/page.tsx`（サインイン画面） - `/app/layout.tsx`（全体のレイアウト） - `/middleware.ts`（認証保護のためのミドルウェア） **必要なパッケージ:** - `tailwindcss`
生成完了後、下記の画面が表示されました。
2.3.2. 必須ファイルの確認
生成できたら、下記の4ファイルが生成されていることを確認します。下記は今回Clerkを実装するために必須のファイルです。
app/signin/page.tsxapp/page.tsxapp/layout.tsxmiddleware.ts
もしなければ、上記のパス上でファイルを生成してください。各ファイルの中身はGitHubで修正するので、空欄や生成直後の状態で問題ありません。
2.4. ステップ3：StackBlitzを経由してGitHubにプッシュ
プロジェクトをGitHubにプッシュするために、StackBlitzを経由します。ローカルから手動やGitでリポジトリを作成しても問題ありません。
生成したファイルをStackBlitzで開きます。Bolt.newの画面右上のExport >「Open in StackBlitz」をクリックします。
生成したプロジェクトがStackBlitzで開きます。
正常に開けたら、画面左上の「Create a repository」をクリックします。これでこのプロジェクトのコピーリポジトリをGitHubで作成できます。
StackBlitzからGitHubでリポジトリを作成するには、連携用のGitHubアプリをインストールしてGitHubアカウントの設定をする必要があります。未対応の場合は下記のポップアップで「Configure App」をクリックします。
新しいブラウザタブで設定画面が開きます。StackBlitzに付与する権限を選択します。今回は「All repositories」を選択しましたが、権限対象を限定したい場合は「Only select repositories」を選択して、「Install & Authorize」をクリックします。
連携するGitHubアカウントのパスワードを入力し、「Confirm」をクリックして設定を完了します。
StackBlitzのタブに戻って「Update status」をクリックすると、「App is installed」が表示されるので「Proceed」をクリックします。
ポップアップが閉じるので、再度「Create a repository」をクリックします。GitHubで作成するリポジトリの名前を設定し（デフォルトのままでも可）「Create a repository」をクリックします。
ポップアップが閉じたらリポジトリ作成完了です。GitHubのリポジトリ一覧にアクセスして作成したリポジトリを確認し、クリックしてリポジトリを開きます。
2.5. ステップ4：GitHubでClerkを実装
次に、GitHubでコードを修正してClerkを実装します。下記のドキュメントを参考にします。なお、本記事でご紹介する内容は2025年4月時点の最新バージョンでの実装内容です。
GitHubでの編集は、対象のファイルを開いてから右上の編集アイコンをクリックし、編集モードにして行います。編集できたら右上の「Commit changes...」をクリックして編集完了です。
2.5.1. Clerk SDKインストールコードの追加
まずClerkのNext.js SDKをインストールするコードを追加します。
ClerkのNext.js SDKは、アプリにClerkの認証機能を組み込むためのライブラリです。これをインストールすることで、各ページでユーザーのログイン状態やユーザー情報の取得、認証のUIコンポーネントの使用ができるようになります。Clerkをアプリに組み込むためには、まずこのSDKをインストールする必要があります。
最新版のSDKをインストールします。2025年4月時点での最新バージョンは6.0.0です。最新バージョンはアップグレードガイドで確認してください。
- 対象ファイル：
package.json>dependencies内 - 追加コード：
"@clerk/nextjs": "^6.0.0",
2.5.2. Nextのバージョン確認
ClerkではNextのバージョンは13.5.7以降が推奨されているため、バージョンが13.5.7以降になっているのを確認します。なっていなければ修正します。
- 対象ファイル：
package.json>dependencies内 - 確認箇所：
"next/swc-wasm-nodejs"、"next"
2.5.3. 認証関数の追加
次に、認証用の関数を使用できるようにコードを修正します。使用する関数はauthMiddlewareで、リクエストがあったときにログインの有無やリダイレクトを判断します。
- 対象ファイル：
middleware.ts - 修正コード：現在記述されているコードを全て削除し、下記のコードに差し替え
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';
const isPublicRoute = createRouteMatcher(['/signin(.*)']);
export default clerkMiddleware(async (auth, req) => {
const { userId } = await auth();
if (!userId && !isPublicRoute(req)) {
return NextResponse.redirect(new URL('/signin', req.url));
}
});
export const config = {
matcher: [
'/',
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
'/(api|trpc)(.*)',
],
};
2.5.4. Server Actionsの有効化
ClerkのNext.js SDK V6を利用するには、Next.js のServer Actionsを有効化する必要があります。そのための修正を下記の通り行います。
- 対象ファイル：
next.config.js - 修正コード：現在記述されているコードを全て削除し、下記のコードに差し替え
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
images: {
unoptimized: true,
},
experimental: {
serverActions: true,
},
};
module.exports = nextConfig;
2.5.5. 各種Clerk UIコンポーネントを追加
次に、ClerkのUIコンポーネントをアプリに実装するための修正を行います。UIコンポーネントは実装したい各ページのファイルで追加する必要があります。
2.5.5.1. app/layout.tsx
まずは、全ページ共通のレイアウトや設定を定義するapp/layout.tsxで、全ページ共通で使用する関数やUIコンポーネントのインポートとUIの定義を行います。
ちなみに、今回インポートする関数・コンポーネントは下記の通りです。
| 名前 | 用途 |
|---|---|
ClerkProvider |
Clerkの認証情報をアプリ全体で使用できるようにするもの。他のClerkコンポーネントを機能させるために必要です。 |
SignInButton |
サインイン画面に遷移するボタンを表示します。クリックするとClerkのSignInページに飛びます。 |
SignUpButton |
サインアップ画面に遷移するボタンを表示します。SignUpの導線を作りたいときに使います。 |
SignedIn |
ユーザーがサインインしているときだけ囲んだ中身を表示する条件付きラッパー。 |
SignedOut |
ユーザーがサインアウトしているときだけ囲んだ中身を表示する条件付きラッパー。 |
UserButton |
画面右上にユーザーのプロフィール画像（丸いアイコン）を表示。クリックでユーザーメニューが開きます。 |
また、コードの後半ではログイン・ログアウト状態に応じてUIを自動で表示するようにコードを記述します。
下記の通りファイルを修正します。
- 対象ファイル：
app/layout.tsx - 修正コード：現在記述されているコードを全て削除し、下記のコードに差し替え
import type { Metadata } from 'next'
import {
ClerkProvider,
SignInButton,
SignUpButton,
SignedIn,
SignedOut,
UserButton,
} from '@clerk/nextjs'
import { Inter } from 'next/font/google'
import './globals.css'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
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={`${inter.variable} antialiased`}>
<header className="flex justify-end items-center p-4 gap-4 h-16">
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}
2.5.5.2. signin/page.tsx
次に、サインイン画面です。サインイン画面ではClerkのサインインコンポーネントを表示します。また、Signin画面のパスを<SignIn path="/signin" routing="path" />と明確に定義することで、Clerkのホスト型UIにリダイレクトされるのを回避することができます。
| 名前 | 用途 |
|---|---|
Signin |
Clerkのサインイン用UIフォームを表示します。 |
- 対象ファイル：
signin/page.tsx - 修正コード：現在記述されているコードを全て削除し、下記のコードに差し替え
'use client';
import { SignIn } from '@clerk/nextjs';
export default function Page() {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<SignIn path="/signin" routing="path" />
</div>
);
}
2.5.5.3. app/page.tsx
次に、トップ画面を修正します。この画面は画面右上にユーザーボタンだけを表示する画面にします。ユーザーボタンはapp/layout.tsxで全ページに表示するよう設定しているので、ここでは最低限の内容のみを設定します。
- 対象ファイル：
app/page.tsx - 修正コード：現在記述されているコードを全て削除し、下記のコードに差し替え
'use client';
export default function Home() {
return (
<div className="min-h-screen p-4 bg-gray-50">
<div className="flex justify-end">
</div>
</div>
);
}
2.6. ステップ5：Vercelにデプロイ
コードの修正が完了したので、Vercelにデプロイします。
下記のURLからVercelにログインします。アカウントを作成していない方は新規登録も行ってください。新規登録後に連携設定が必要になるので、GitHubアカウントで新規登録するのがおすすめです。
2.6.1. GitHubリポジトリを選択
GitHubで修正したリポジトリをVercelにプッシュします。Vercelにログイン後、新規プロジェクト作成画面の「Import Git Repository」一覧にある先ほど修正したリポジトリの「Import」をクリックします。
ここでGitHubからインポートして作成すると、GitHubでの修正がVercelにも自動で反映されるようになります。コードの修正結果はVercelで確認してください。
2.6.2. デプロイの設定（環境変数の設定）
次に、デプロイの設定画面に移動します。念のため「Framework Preset」が「Next.js」になっていることを確認し、「Environment Variables」をクリックして環境変数の入力欄を開きます。
下記の通り、Clerkの2種類のAPI Keyを環境変数として設定します。API Keyの値は先ほどClerkのダッシュボードでコピーした値を、NEXT_PUBLIC_CLERK_SIGN_IN_URLは値に/signinを設定してください。NEXT_PUBLIC_CLERK_SIGN_IN_URLは、サインイン画面がClerkのホスト型UIにリダイレクトするのを回避するために念のため設定しておきます。
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYCLERK_SECRET_KEYNEXT_PUBLIC_CLERK_SIGN_IN_URL
API keyのKeyとValueを入力したら、「Deploy」をクリックします。これでVercelでのデプロイが開始します。
2.6.3. デプロイ完了
「Congratulations!」という画面が表示されたらデプロイ完了です！下部の「Continue to Dashboard」をクリックすると、デプロイしたプロジェクトのダッシュボードに移動します。
Vercelのプロジェクトダッシュボードは下記のようになっています。
3. テスト
それでは、Clerkが実装できているか確認します。Vercelのダッシュボード上部の「Visit」をクリックすると、新規タブでVercel環境上のサイトが表示されます。
まずサインイン画面/signinが表示されます。Clerkのアプリ作成時にサインインオプションとして選択したGoogleとEmailがサインインの選択肢として選択できるようになっています。
Googleサインインを選択すると、Googleアカウントの選択とreCAPTCHAが表示されるので、先に進みます。
サインインが完了して/（トップ画面）に移動します。ダッシュボード画面では、分かりにくいですが、画面右上にClerkのUserButtonコンポーネントでプロフィール画像が表示されます。プロフィール画像をクリックするとユーザーメニューが表示されます。クリックして確認しましょう。
「Manage account」をクリックすると、アカウント編集ポップアップが表示されます。ここで編集した内容はClerkのUsersに反映されます。
「Sign out」をクリックすると、サインアウトしてサインイン画面にリダイレクトされます。
また、Clerkのダッシュボード > Usersを開き、サインインしたアカウントが登録されているか確認します。登録されていれば連携成功です！
4. まとめ
本記事では、ClerkのサインインフォームをBolt.newで構築したプロジェクトに導入し、Vercelにデプロイするまでの手順を詳しく紹介しました。
Clerkを使用することで、サインインUIやログイン状態の管理機能を数行のコードで導入できました。また、Bolt.new、GitHub、Vercelを組み合わせることで、簡単に認証機能付きのアプリを構築できました。
時間をかけずに認証機能付きのアプリを構築したい場合はぜひClerkをご検討ください。
