Clerkでログイン認証を簡単に実装してみた

認証サービスの一つであるClerkを試してみました

環境

Next.js 15.2.1
Clerk 6.12.9

手順

Clerkのインストール

npm install @clerk/nextjs

middleware.tsを作成

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

フロントの作成

以下のような感じでざっくりレイアウト作成

import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  SignUpButton,
  UserButton,
} from "@clerk/nextjs";
import "./globals.css";

export default function Layout() {
  return (
    <ClerkProvider>
      <html lang="ja">
        <body>
          <div className="h-screen flex flex-col justify-center items-center bg-gray-100">
            <SignedOut>
              <div className="space-x-4">
                <div className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                  <SignInButton />
                </div>
                <div className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
                  <SignUpButton />
                </div>
              </div>
            </SignedOut>
            <SignedIn>
              <div className="flex items-center space-x-4">
                <UserButton />
                <span className="text-gray-700">Welcome back!</span>
              </div>
            </SignedIn>
          </div>
        </body>
      </html>
    </ClerkProvider>
  );
}