# Integrate Prisma Postgres with Clerk
**Before you start**
- [Follow the Next.js quickstart](https://clerk.com/docs/nextjs/getting-started/quickstart.md)
Integrating Prisma Postgres with Clerk gives you the benefits of using a Prisma Postgres database while leveraging Clerk's authentication, prebuilt components, and webhooks. This guide will show you how to create a simple blog application that allows users to create and read posts using Prisma Postgres and Clerk. This guide uses Next.js App Router but the same principles can be applied to other SDKs.
1. ## Install Prisma
Run the following command to install Prisma:
filename: terminal
```sh
npm install prisma tsx --save-dev
```
2. ## Initialize Prisma
Run the following command to initialize Prisma:
filename: terminal
```sh
npx prisma init --output ../app/generated/prisma
```
This will:
- Create a new `prisma/` directory in your project, with a `schema.prisma` file inside of it. The `schema.prisma` file is where you will define your database models.
- Create a `prisma.config.ts` file in the root of your project.
- Update your `.env` file to include a `DATABASE_URL` environment variable, which is used to store your database connection string for your Prisma Postgres database.
3. ## Update the Prisma configuration
Ensure your `.env` file is loaded so `DATABASE_URL` is available before the Prisma config is evaluated. In Node.js, `.env` files can be loaded natively using the `--env-file=.env` flag when starting your app.
filename: prisma.config.ts
```ts
import { defineConfig, env } from 'prisma/config'
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
},
engine: 'classic',
datasource: {
url: env('DATABASE_URL'),
},
})
```
4. ## Update the database schema
In the `prisma/schema.prisma` file, update the schema to include a new model called `Post` with the columns `id`, `title`, `content`, `published`, and `authorId`. The `id` column will be used as the post's primary key, and the `authorId` column will be used to store the user's Clerk ID.
filename: prisma/schema.prisma
```prisma
generator client {
provider = "prisma-client"
output = "../app/generated/prisma"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId String
}
```
5. ## Push the schema to the database
Run the following command to push the updated schema to the database:
filename: terminal
```sh
npx prisma db push
```
6. ## Create a reusable Prisma Client instance
At the root of your project, create a folder called `lib`. Inside of it, create a new file called `prisma.ts` and add the following code to it. This will set up a single Prisma Client instance, which is used to interact with your database, and bind it to the global object so that only one instance of the client is created in your application. This helps resolve issues with hot reloading that can occur when using Prisma with Next.js in development mode.
filename: lib/prisma.ts
```typescript
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
const globalForPrisma = global as unknown as { prisma: typeof prisma }
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
export default prisma
```
7. ## Create the UI for the homepage
Now that all of the set up is complete, it's time to start building out your app.
Replace the contents of `app/page.tsx` with the following code. This page fetches all posts from your database and displays them on the homepage, showing the title and author ID for each post. It uses the [`prisma.post.findMany()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference?utm_source=docs#findmany) method, which is a Prisma Client method that retrieves all records from the database.
filename: app/page.tsx
```tsx
import Link from 'next/link'
import prisma from '@/lib/prisma'
export default async function Page() {
const posts = await prisma.post.findMany() // Query the `Post` model for all posts
return (
)
}
```
8. ## Create a new post
Create a new file called `app/posts/create/page.tsx` and add the following code to it. This page allows users to create new posts. It uses Clerk's [`auth`](https://clerk.com/docs/reference/backend/types/auth-object.md) object to get the user's ID.
- If there is no user ID, the user is not signed in, so a sign in button is displayed.
- If the user is signed in, the "Create New Post" form is displayed. When the form is submitted, the `createPost()` function is called. This function creates a new post in the database using the [`prisma.post.create()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference?utm_source=docs#create) method, which is a Prisma Client method that creates a new record in the database.
filename: app/posts/create/page.tsx
```tsx
import Form from 'next/form'
import prisma from '@/lib/prisma'
import { redirect } from 'next/navigation'
import { SignInButton, useAuth } from '@clerk/nextjs'
import { revalidatePath } from 'next/cache'
import { auth } from '@clerk/nextjs/server'
export default async function NewPost() {
// The `Auth` object gives you access to properties like `userId`
// Accessing the `Auth` object differs depending on the SDK you're using
// https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object
const { userId } = await auth()
// Protect this page from unauthenticated users
if (!userId) {
return (
You must be signed in to create a post.
)
}
async function createPost(formData: FormData) {
'use server'
// Type check
if (!userId) return
const title = formData.get('title') as string
const content = formData.get('content') as string
await prisma.post.create({
data: {
title,
content,
authorId: userId,
},
})
revalidatePath('/')
redirect('/')
}
return (
Create New Post
)
}
```
9. ## Query a single record
Create a new file called `app/posts/[id]/page.tsx` and add the following code to it. This page uses the URL parameters to get the post's ID, and then fetches it from your database and displays it on the page, showing the title, author ID, and content. It uses the [`prisma.post.findUnique()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference?utm_source=docs#findunique) method, which is a Prisma Client method that retrieves a single record from the database.
filename: app/posts/[id]/page.tsx
```tsx
import prisma from '@/lib/prisma'
export default async function Post({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
const post = await prisma.post.findUnique({
where: { id: parseInt(id) },
})
if (!post) {
return (
No post found.
)
}
return (
{post && (
{post.title}
by {post.authorId}
{post.content || 'No content available.'}
)}
)
}
```
10. ## Test your app
Run your application with the following command:
filename: terminal
```sh
npm run dev
```
Visit your application at `http://localhost:3000`. Sign in with Clerk and interact with the application to create and read posts. You should be able to see the posts you created on the homepage, and select a single post to view it.
---
## Sitemap
[Overview of all docs pages](https://clerk.com/docs/llms.txt)