Prisma ORMをClerk AuthおよびNext.jsと連携して使用する方法

25分

はじめに

Clerkは、サインアップ、サインイン、ユーザー管理、Webhooksを処理するドロップイン認証プロバイダーで、開発者がこれらの手間を省くことができます。

このガイドでは、Clerkを新しいNext.jsアプリに組み込み、Prisma Postgresデータベースにユーザーを永続化し、小さな投稿APIを公開します。このガイドの完全な例はGitHubで確認できます。

前提条件

1. プロジェクトをセットアップする

アプリを作成する

npx create-next-app@latest clerk-nextjs-prisma

セットアップをカスタマイズするように促されます。デフォルトを選択してください。

情報

TypeScriptを使用しますか？ はい
ESLintを使用しますか？ はい
Tailwind CSSを使用しますか？ はい
コードをsrc/ディレクトリ内に配置しますか？ はい
App Routerを使用しますか？ (推奨) はい
next devにTurbopackを使用しますか？ はい
インポートエイリアス (デフォルトは@/*) をカスタマイズしますか？ いいえ

プロジェクトディレクトリへ移動する

cd clerk-nextjs-prisma

2. Clerkをセットアップする

2.1. 新しいClerkアプリケーションを作成する

Clerkにサインインし、ホームページへ移動します。そこから、Create Applicationボタンを押して新しいアプリケーションを作成します。タイトルを入力し、サインインオプションを選択して、Create Applicationをクリックします。

情報

このガイドでは、Google、Github、Emailのサインインオプションを使用します。

Clerk Next.js SDKをインストールする

npm install @clerk/nextjs

Clerkキーをコピーし、プロジェクトのルートにある**.env**に貼り付けます

.env

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-publishable-key>
CLERK_SECRET_KEY=<your-secret-key>

2.2. Clerkミドルウェアでルートを保護する

clerkMiddlewareヘルパーは認証を有効にし、保護されたルートを設定する場所です。

プロジェクトの/srcディレクトリ内にmiddleware.tsファイルを作成します

src/middleware.ts

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

export default clerkMiddleware();

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.3. レイアウトにClerk UIを追加する

次に、アプリケーションをClerkProviderコンポーネントでラップして、認証をグローバルに利用できるようにする必要があります。

layout.tsxファイルに、ClerkProviderコンポーネントを追加します

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  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`}>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

サインインボタンとサインアップボタン、およびユーザーがサインインした後のユーザーボタンを表示するために使用されるNavbarコンポーネントを作成します

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import {
  ClerkProvider,
  UserButton,
  SignInButton,
  SignUpButton,
  SignedOut,
  SignedIn,
} from "@clerk/nextjs";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  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`}>
          <Navbar />
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

const Navbar = () => {
  return (
    <header className="flex justify-end items-center p-4 gap-4 h-16">
      <SignedOut>
        <SignInButton />
        <SignUpButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  );
};

3. Prismaをインストールして設定する

3.1. 依存関係をインストールする

Prismaを始めるには、いくつかの依存関係をインストールする必要があります

Prisma Postgres (推奨)
その他のデータベース

npm install prisma --save-dev
npm install tsx --save-dev
npm install @prisma/extension-accelerate

npm install prisma --save-dev
npm install tsx --save-dev

インストール後、プロジェクトでPrismaを初期化します

npx prisma init --db --output ../src/app/generated/prisma

情報

Prisma Postgresデータベースをセットアップする際に、いくつかの質問に答える必要があります。お住まいの地域に最も近いリージョンと、「My Clerk NextJS Project」のような覚えやすいデータベース名を選択してください。

これにより、以下が作成されます

prisma/ディレクトリとその中のschema.prismaファイル
.env内のDATABASE_URL

3.2. Prismaスキーマを定義する

prisma/schema.prismaファイルに、以下のモデルを追加します

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
  output   = "../src/app/generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id      Int     @id @default(autoincrement())
  clerkId String  @unique
  email   String  @unique
  name    String?
  posts   Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}

これにより、UserとPostという2つのモデルが作成され、それらの間に一対多のリレーションシップが設定されます。

次に、以下のコマンドを実行してデータベーステーブルを作成し、Prismaクライアントを生成します

npx prisma migrate dev --name init

警告

/src/app/generated/prismaを.gitignoreファイルに追加することをお勧めします。

3.3. 再利用可能なPrismaクライアントを作成する

src/ディレクトリ内に/libディレクトリを作成し、その中にprisma.tsファイルを作成します

Prisma Postgres (推奨)
その他のデータベース

src/lib/prisma.ts

import { PrismaClient } from "@/app/generated/prisma";
import { withAccelerate } from "@prisma/extension-accelerate";

const globalForPrisma = global as unknown as {
  prisma: PrismaClient;
};

const prisma =
  globalForPrisma.prisma || new PrismaClient().$extends(withAccelerate());

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

export default prisma;

src/lib/prisma.ts

import { PrismaClient } from "@/app/generated/prisma";

const globalForPrisma = global as unknown as {
  prisma: PrismaClient;
};

const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

export default prisma;

4. Clerkとデータベースを連携させる

4.1. Clerk webhookエンドポイントを作成する

Svixを使用して、リクエストが安全であることを確認します。Svixは各webhookリクエストに署名し、それが正当であり、配信中に改ざんされていないことを確認できるようにします。

svixパッケージをインストールする

npm install svix

src/app/api/webhooks/clerk/route.tsに新しいAPIルートを作成します

必要な依存関係をインポートする