如何在 Clerk Auth 和 Next.js 中使用 Prisma ORM

25 分鐘

簡介

Clerk 是一個即插即用的身份驗證提供商，它處理註冊、登入、使用者管理和 webhook，讓你無需費心。

在本指南中，你將把 Clerk 整合到一個全新的 Next.js 應用中，將使用者持久化到 Prisma Postgres 資料庫中，並公開一個簡單的文章 API。你可以在 GitHub 上找到本指南的完整示例。

先決條件

1. 設定你的專案

建立應用

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

它會提示你自定義設定。選擇預設值即可

資訊

你想使用 TypeScript 嗎？ Yes
你想使用 ESLint 嗎？ Yes
你想使用 Tailwind CSS 嗎？ Yes
你想把程式碼放在 src/ 目錄下嗎？ Yes
你想使用 App Router 嗎？ (推薦) Yes
你想在 next dev 中使用 Turbopack 嗎？ Yes
你想自定義匯入別名（預設為 @/*）嗎？ No

導航到專案目錄

cd clerk-nextjs-prisma

2. 設定 Clerk

2.1. 建立新的 Clerk 應用

登入到 Clerk 並導航到主頁。在那裡，點選 Create Application 按鈕建立一個新應用。輸入標題，選擇登入選項，然後點選 Create Application。

資訊

在本指南中，將使用 Google、Github 和電子郵件登入選項。

安裝 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 資料庫時，你需要回答幾個問題。選擇離你最近的區域，併為資料庫選擇一個易記的名稱，例如“我的 Clerk NextJS 專案”

這將建立

一個包含 schema.prisma 檔案的 prisma/ 目錄
.env 檔案中的 DATABASE_URL

3.2. 定義你的 Prisma Schema

在 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，它們之間具有一對多的關係。

現在，執行以下命令建立資料庫表並生成 Prisma Client

npx prisma migrate dev --name init

警告

建議你將 /src/app/generated/prisma 新增到你的 .gitignore 檔案中。

3.3. 建立可複用的 Prisma Client

在 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 路由

匯入必要的依賴項