How to use Prisma ORM with Clerk Auth and Next.js

25 min

Introduction

Clerk is a drop-in auth provider that handles sign-up, sign-in, user management, and webhooks so you don't have to.

In this guide you'll wire Clerk into a brand-new Next.js app, persist users in a Prisma Postgres database, and expose a tiny posts API. You can find a complete example of this guide on GitHub.

Prerequisites

1. Set up your project

Create the app:

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

It will prompt you to customize your setup. Choose the defaults:

info

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a src/ directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? Yes
Would you like to customize the import alias (@/* by default)? No

Navigate to the project directory:

cd clerk-nextjs-prisma

2. Set up Clerk

2.1. Create a new Clerk application

Sign in to Clerk and navigate to the home page. From there, press the Create Application button to create a new application. Enter a title, select your sign-in options, and click Create Application.

info

For this guide, the Google, Github, and Email sign in options will be used.

Install the Clerk Next.js SDK:

npm install @clerk/nextjs

Copy your Clerk keys and paste them into .env in the root of your project:

.env

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

2.2. Protect routes with Clerk middleware

The clerkMiddleware helper enables authentication and is where you'll configure your protected routes.

Create a middleware.ts file in the /src directory of your project:

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. Add Clerk UI to your layout

Next, you'll need to wrap your app in the ClerkProvider component to make authentication globally available.

In your layout.tsx file, add the ClerkProvider component:

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>
  );
}

Create a Navbar component which will be used to display the Sign In and Sign Up buttons as well as the User Button once a user is signed in:

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. Install and configure Prisma

3.1. Install dependencies

To get started with Prisma, you'll need to install a few dependencies:

Prisma Postgres (recommended)
Other databases

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

Once installed, initialize Prisma in your project:

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

info

You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for the database like "My Clerk NextJS Project"

This will create:

A prisma/ directory with a schema.prisma file
A DATABASE_URL in .env

3.2. Define your Prisma Schema

In the prisma/schema.prisma file, add the following models:

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())
}

This will create two models: User and Post, with a one-to-many relationship between them.

Now, run the following command to create the database tables and generate the Prisma Client:

npx prisma migrate dev --name init

warning

It is recommended that you add /src/app/generated/prisma to your .gitignore file.

3.3. Create a reusable Prisma Client

In the src/ directory, create /lib and a prisma.ts file inside it:

Prisma Postgres (recommended)
Other databases

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. Wire Clerk to the database

4.1. Create a Clerk webhook endpoint

You'll use Svix to ensure the request is secure. Svix signs each webhook request so you can verify that it's legitimate and hasn't been tampered with during delivery.

Install the svix package:

npm install svix

Create a new API route at src/app/api/webhooks/clerk/route.ts:

Import the necessary dependencies: