Vercel

This guide will show you how to deploy your Pro Next.js Drizzle 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 includes the necessary build configuration:

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

Vercel will automatically run the build script. The Drizzle schema types are generated at build time through Next.js's build process. 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