Deploy to Vercel

Deploy the OpenSana Next.js web app to Vercel with integrated Convex deployment.

This page covers deploying the Next.js web app (apps/web) to Vercel. The Convex backend must be set up first — see Deploy the Convex Backend.

You can deploy OpenSana's web app to any hosting provider that supports Next.js. Vercel is documented here as a reference.

1. Import the Repository

In the Vercel dashboard, import your GitHub repository and configure:

Setting	Value
Framework Preset	Next.js
Root Directory	`apps/web`
Install Command	Leave as default (Vercel auto-detects pnpm)
Output Directory	Leave as default (Next.js default)

2. Set the Build Command

Override the Build Command to deploy Convex functions as part of every Vercel build:

npx convex deploy --cmd 'next build' --cmd-url-env-var-name NEXT_PUBLIC_CONVEX_URL

This runs npx convex deploy first, then builds the Next.js app. The --cmd-url-env-var-name flag injects the correct NEXT_PUBLIC_CONVEX_URL automatically during the build, so you don't need to set it as a separate environment variable.

If you prefer to deploy Convex separately (e.g. from your local machine or a different CI step), leave the build command as the default next build and add NEXT_PUBLIC_CONVEX_URL to the environment variables below.

3. Set Environment Variables

Add the following environment variables in Vercel (Settings → Environment Variables):

Variable	Required	Description
`CONVEX_DEPLOY_KEY`	Yes	Deploy key from Convex dashboard (Settings → General → Deploy Keys). Only needed if using the integrated build command above
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	Yes	Production Clerk publishable key
`CLERK_SECRET_KEY`	Yes	Production Clerk secret key
`NEXT_PUBLIC_CLERK_SIGN_IN_URL`	Yes	`/auth/sign-in`
`NEXT_PUBLIC_CLERK_SIGN_UP_URL`	Yes	`/auth/sign-up`
`NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL`	Yes	`/auth/callback`
`NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL`	Yes	`/auth/callback`

Variables you do NOT need in Vercel

These are Convex server-side variables — set them in the Convex dashboard (Settings → Environment Variables), not in Vercel:

CLERK_JWT_ISSUER_DOMAIN
RESEND_API_KEY
EMAIL_FROM

If you're using the integrated build command with --cmd-url-env-var-name, you also don't need NEXT_PUBLIC_CONVEX_URL — it's injected automatically.

4. Deploy

Click Deploy. Vercel will:

Install dependencies (pnpm install)
Run npx convex deploy (pushes functions and schema to your Convex production deployment)
Run next build (builds the Next.js app)
Deploy the built app to Vercel's edge network

Subsequent pushes to your production branch will trigger the same flow automatically.

Deploying Convex Separately

If you don't want Convex to deploy as part of the Vercel build (e.g. you want more control over when backend changes go live):

Use the default build command (next build)
Remove CONVEX_DEPLOY_KEY from Vercel
Add NEXT_PUBLIC_CONVEX_URL to Vercel (e.g. https://friendly-wolf-872.convex.cloud)
Deploy Convex manually or from a separate CI step:

CONVEX_DEPLOYMENT="prod:friendly-wolf-872" npx convex deploy

Speed Insights

OpenSana includes Vercel Speed Insights out of the box. The <SpeedInsights /> component is already added to the root layout (apps/web/app/layout.tsx), so Core Web Vitals (LCP, CLS, FID, TTFB, INP) are automatically reported when deployed to Vercel.

No additional configuration is required — view your metrics in the Vercel dashboard under Speed Insights.