Next.js & Prisma Postgres Auth Starter

Next.js & Prisma Postgres Auth Starter

This repository provides a boilerplate to quickly set up a Next.js demo application with authentication using NextAuth.js v4, Prisma Postgres and Prisma ORM, and deploy it to Vercel. It includes an easy setup process and example routes that demonstrate basic CRUD operations against the database.

Features

• Next.js 15 app with App Router, Server Actions & API Routes
• Data modeling, database migrations, seeding & querying
• Log in and sign up authentication flows
• CRUD operations to create, view and delete blog posts
• Pagination, filtering & relations queries

Getting started

1. Install dependencies

After cloning the repo and navigating into it, install dependencies:

1
npm install

1. Create a Prisma Postgres instance

Create a Prisma Postgres instance by running the following command:

1
npx prisma init --db

This command is interactive and will prompt you to:

1. Log in to the Prisma Console
2. Select a region for your Prisma Postgres instance
3. Give a name to your Prisma project

Once the command has terminated, copy the Database URL from the terminal output. You'll need it in the next step when you configure your .env file.

2. Set up your .env file

You now need to configure your database connection via an environment variable.

First, create an .env file:

1
touch .env

Then update the .env file by replacing the existing DATABASE_URL value with the one you previously copied. It will look similar to this:

1
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"

To ensure your authentication works properly, you'll also need to set env vars for NextAuth.js:

1
AUTH_SECRET="RANDOM_32_CHARACTER_STRING"

You can generate a random 32 character string for the AUTH_SECRET secret with this command:

1
npx auth secret

In the end, your entire .env file should look similar to this (but using your own values for the env vars):

1
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcGlfa2V5IjoiMWEzMjBiYTEtYjg2Yy00ZTA5LThmZTktZDBhODA3YjQwZjBkIiwidGVuYW50X2lkIjoiY2RhYmM3ZTU1NzdmMmIxMmM0ZTI1Y2IwNWJhZmZhZmU4NjAxNzkxZThlMzhlYjI1NDgwNmIzZjI5NmU1NTkzNiIsImludGVybmFsX3NlY3JldCI6ImI3YmQzMjFhLTY2ODQtNGRiMC05ZWRiLWIyMGE2ZTQ0ZDMwMSJ9.JgKXQBatjjh7GIG3_fRHDnia6bDv8BdwvaX5F-XdBfw"
2

3
AUTH_SECRET="gTwLSXFeNWFRpUTmxlRniOfegXYw445pd0k6JqXd7Ag="

3. Migrate the database

Run the following commands to set up your database and Prisma schema:

1
npx prisma migrate dev --name init

4. Seed the database

Add initial data to your database:

1
npx prisma db seed

1
# Using yarn
2
yarn prisma db seed
3

4
# Using pnpm
5
pnpm prisma db seed
6

7
# Using bun
8
bun prisma db seed

5. Run the app

Start the development server:

1
npm run dev

1
# Using yarn
2
yarn dev
3

4
# Using pnpm
5
pnpm run dev
6

7
# Using bun
8
bun run dev

Once the server is running, visit http://localhost:3000 to start using the app.

Next steps

• Prisma ORM documentation
• Prisma Client API reference
• Join our Discord community
• Follow us on Twitter