Skip to main content
General
Deployment

Vercel

Learn how to deploy on Vercel.

Open MarkdownFull AI corpusFeedback

Deploy the Pro Next.js Drizzle starter kit as a standard Next.js project on Vercel. The repository is a single application, so it does not require monorepo root-directory or custom framework settings.

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):

Vercel Environment Variables
NEXT_PUBLIC_SITE_URL=<YOUR_SITE_URL>
DATABASE_URL=<YOUR_DATABASE_URL>
BETTER_AUTH_SECRET=<YOUR_BETTER_AUTH_SECRET>
STRIPE_SECRET_KEY=<YOUR_STRIPE_SECRET_KEY>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<YOUR_STRIPE_PUBLISHABLE_KEY>
STRIPE_WEBHOOK_SECRET=<YOUR_STRIPE_WEBHOOK_SECRET>
NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY=<YOUR_PRO_MONTHLY_PRICE_ID>
NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY=<YOUR_PRO_YEARLY_PRICE_ID>
NEXT_PUBLIC_STRIPE_PRICE_LIFETIME=<YOUR_LIFETIME_PRICE_ID>
NEXT_PUBLIC_STRIPE_PRICE_CREDITS_STARTER=<YOUR_STARTER_CREDITS_PRICE_ID>
NEXT_PUBLIC_STRIPE_PRICE_CREDITS_BASIC=<YOUR_BASIC_CREDITS_PRICE_ID>
NEXT_PUBLIC_STRIPE_PRICE_CREDITS_PRO=<YOUR_PRO_CREDITS_PRICE_ID>
RESEND_API_KEY=<YOUR_RESEND_API_KEY>
EMAIL_FROM=<YOUR_EMAIL_FROM>

DATABASE_URL and BETTER_AUTH_SECRET are required. NEXT_PUBLIC_SITE_URL is optional and should contain your stable production URL when set. The Stripe and Resend variables are only required when you enable those features. Copy every price variable referenced by your deployed billingConfig; the names above match the shipped configuration.

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.

Apply the database migrations

The application build does not apply database migrations. Generate and commit each migration while developing, then apply the committed migrations once against the production database before the new deployment receives traffic:

Terminal
npm run db:migrate

Run this from a controlled CI release job or a one-off local session with the production DATABASE_URL. Do not add it to the Vercel build command because concurrent builds or replicas must not race to change the schema.

Use a pooled connection string intended for serverless workloads when your database provider offers one. Keep the application and database in nearby regions to reduce query latency. If the database firewall requires fixed source addresses, configure a supported secure connection method with the provider rather than assuming every Vercel function has a stable outbound IP.

Build Settings

Vercel will automatically detect Next.js and configure the build settings. The starter kit includes the necessary build configuration:

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

Vercel runs the next build script. Drizzle infers schema types from the TypeScript source. This build does not run drizzle-kit generate. When you change the database schema, generate and commit the migration files before deploying.

Leave Vercel's framework preset set to Next.js and use the repository root. A failed environment validation identifies a missing required variable; do not bypass it with SKIP_ENV_VALIDATION for an ordinary Vercel deployment.

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:

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

After adding the endpoint, subscribe only to the events handled by app/api/webhooks/stripe/route.ts. Use Stripe test mode to verify a checkout and webhook delivery before switching to live keys.

Verify the deployment

Before sending users to the application:

  1. Open the production URL and confirm it uses HTTPS and the final domain.
  2. Create an account, verify its email and sign in again.
  3. Test an organization invitation with a second account.
  4. Exercise each enabled integration, including one Stripe test checkout and one upload.
  5. Confirm the Vercel function logs do not contain credentials or tokens.
  6. Enable Web Analytics and Speed Insights separately in the Vercel dashboard if you want to use the components already included in the root layout.