Skip to content
Log InContact
Sign Up
← Back to Templates
Avatar of prismaprisma/nextjs-auth-starter

Next.js & Prisma Postgres Auth Starter

Get started with Next.js, Prisma Postgres, and Auth.js

Deploy
View Demo
Framework
Next.js
Use Case
Starter
CSS
Tailwind
Database
PostgresPrisma
Auth
NextAuth.js
Contentful thumbnail for 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:

npm install

1. Create a Prisma Postgres instance

Create a Prisma Postgres instance by running the following command:

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:

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:

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:

AUTH_SECRET="RANDOM_32_CHARACTER_STRING"

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

npx auth secret

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

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


AUTH_SECRET="gTwLSXFeNWFRpUTmxlRniOfegXYw445pd0k6JqXd7Ag="

3. Migrate the database

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

npx prisma migrate dev --name init

4. Seed the database

Add initial data to your database:

npx prisma db seed
# Using yarn
yarn prisma db seed


# Using pnpm
pnpm prisma db seed


# Using bun
bun prisma db seed

5. Run the app

Start the development server:

npm run dev
# Using yarn
yarn dev


# Using pnpm
pnpm run dev


# Using bun
bun run dev

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

Next steps

← Back to Templates
Contentful thumbnail for Next.js & Prisma Postgres Auth Starter
Avatar of prismaprisma/nextjs-auth-starter

Next.js & Prisma Postgres Auth Starter

Get started with Next.js, Prisma Postgres, and Auth.js

Deploy
View Demo
Framework
Next.js
Use Case
Starter
CSS
Tailwind
Database
PostgresPrisma
Auth
NextAuth.js

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:

npm install

1. Create a Prisma Postgres instance

Create a Prisma Postgres instance by running the following command:

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:

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:

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:

AUTH_SECRET="RANDOM_32_CHARACTER_STRING"

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

npx auth secret

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

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


AUTH_SECRET="gTwLSXFeNWFRpUTmxlRniOfegXYw445pd0k6JqXd7Ag="

3. Migrate the database

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

npx prisma migrate dev --name init

4. Seed the database

Add initial data to your database:

npx prisma db seed
# Using yarn
yarn prisma db seed


# Using pnpm
pnpm prisma db seed


# Using bun
bun prisma db seed

5. Run the app

Start the development server:

npm run dev
# Using yarn
yarn dev


# Using pnpm
pnpm run dev


# Using bun
bun run dev

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

Next steps

Related Templates

Vercel Postgres + Prisma Next.js Starter

Vercel Postgres + Prisma Next.js Starter

Simple Next.js template that uses Vercel Postgres as the database and Prisma as the ORM.

by ▲ Vercel

Fullstack Blog with Next.js + Prisma

Fullstack Blog with Next.js + Prisma

Fullstack Blog with Next.js, Typescript and Prisma

by Prisma

CockroachDB + Prisma + Next.js Starter

CockroachDB + Prisma + Next.js Starter

A starter for full-stack serverless apps using CockroachDB, Prisma, and Next.js.

by Cockroach DB

Next.js Prisma Azure MySQL Starter

Next.js Prisma Azure MySQL Starter

Next.js project that uses Prisma to connect to an Azure database for MySQL Flexible Server database and Tailwind CSS for styling.

by Azure Database

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential