Vercel

This guide will show you how to deploy your Pro Next.js Prisma starter kit to Vercel.

Deploying to Vercel

Vercel is the easiest way to deploy Next.js apps. It's the company behind Next.js and has first-class support for Next.js.

Setup Vercel account

To host your project on Vercel you first have to create an account.

Connect your git repository

After signing up you will be prompted to import a git repository. Select the git provider of your project and connect your git account with Vercel.

Now you will see a list of all your projects. Select the project you want to deploy and click on the Import button.

Configure project

In the Configure Project view expand the Environment Variables section and add the following variables one by one (you can copy them from the .env file in your projects root too):

NEXT_PUBLIC_SITE_URL=<YOUR_SITE_URL>
DATABASE_URL=<YOUR_DATABASE_URL>
AUTH_SECRET=<YOUR_AUTH_SECRET>
AUTH_URL=<YOUR_AUTH_URL>
STRIPE_SECRET_KEY=<YOUR_STRIPE_SECRET_KEY>
STRIPE_PUBLISHABLE_KEY=<YOUR_STRIPE_PUBLISHABLE_KEY>
STRIPE_WEBHOOK_SECRET=<YOUR_STRIPE_WEBHOOK_SECRET>
RESEND_API_KEY=<YOUR_RESEND_API_KEY>
EMAIL_FROM=<YOUR_EMAIL_FROM>

The NEXT_PUBLIC_SITE_URL is the main URL of your site, e.g. https://your-app.com.

Then click the Deploy button and your project will be deployed.

Environment Variables

Make sure to add all required environment variables in the Vercel Dashboard. You can add them during the initial setup or later in the project settings under the Environment Variables tab.

Database

Make sure your database is accessible from Vercel's servers. If using a managed database:

• Whitelist Vercel's IP addresses, or
• Use connection pooling (recommended for serverless functions)

For better performance, make sure to deploy your application to a region that is close to your database. You can select the region of the Vercel serverless functions in the project settings under the Functions tab.

Build Settings

Vercel will automatically detect Next.js and configure the build settings. The starter kit already includes Prisma generation in the build script:

{
  "scripts": {
    "build": "prisma generate && next build",
    "postinstall": "fumadocs-mdx && prisma generate"
  }
}

The build script automatically runs prisma generate before building, and postinstall ensures Prisma Client is generated after dependencies are installed. No additional configuration is needed.

Webhooks

If you're using Stripe webhooks, make sure to configure the webhook endpoint in your Stripe dashboard to point to your Vercel deployment URL:

https://your-app.vercel.app/api/webhooks/stripe