Deploying to Vercel

GlassKit is built to deploy on Vercel. The Next.js 16 features it uses (RSC, server actions, the new image optimization, route groups) all work out of the box. No vercel.json tweaks required.

Step 1: Connect the repo to Vercel

1. Sign in at vercel.com with your GitHub account
2. Click Add New → Project
3. Import your repo
4. Vercel auto-detects Next.js + Bun (because bun.lock is in the repo):
   • Framework Preset: Next.js
   • Build Command: bun run build
   • Output Directory: .next (default)
   • Install Command: bun install

If you prefer npm: delete bun.lock, run npm install once to regenerate package-lock.json, commit it, and Vercel will use npm instead. We recommend Bun for the ~10× faster CI builds.

Don't click Deploy yet — set env vars first.

Step 2: Set environment variables

In the Environment Variables section of the import flow, add each variable from your .env.local. The full list:

Variable	Required	Notes
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	yes	from Clerk dashboard
CLERK_SECRET_KEY	yes	from Clerk dashboard
NEXT_PUBLIC_CONVEX_URL	yes	from npx convex deploy
STRIPE_SECRET_KEY	yes	from Stripe dashboard
STRIPE_WEBHOOK_SECRET	yes	from production webhook config
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	yes	from Stripe dashboard
ANTHROPIC_API_KEY	optional	only if you're using Anthropic
OPENAI_API_KEY	optional	only if you're using OpenAI
NEXT_PUBLIC_APP_URL	yes	https://your-domain.com

Environment scopes — Vercel lets you set vars per environment (Production, Preview, Development). Use test values for Preview and Development. Use live values for Production. This is critical for preventing a preview branch from charging real cards.

Click Deploy. The first build takes ~2 minutes.

Step 3: Update webhook URLs

Once Vercel gives you a https://your-app.vercel.app URL, before testing payments, create a Stripe webhook endpoint pointing at your deployed URL:

• Stripe dashboard → Developers → Webhooks → Add endpoint → https://your-app.vercel.app/api/stripe/webhook
• Select events: checkout.session.completed, customer.subscription.*, invoice.paid, invoice.payment_failed
• Save and copy the new signing secret
• Update STRIPE_WEBHOOK_SECRET in Vercel env vars to the production secret
• Redeploy

Step 4: Deploy Convex to production

npx convex deploy --prod

This deploys your Convex schema and functions to production. Copy the production URL into Vercel env vars as NEXT_PUBLIC_CONVEX_URL.

Step 5: Custom domain

1. Project → Settings → Domains
2. Add Domain → your-app.com
3. Vercel shows the DNS records you need to set. If you bought the domain through Vercel, this is automatic. Otherwise, copy the records to your registrar.
4. Wait ~5 minutes for DNS propagation. HTTPS is provisioned automatically.

After the domain is live:

• Update NEXT_PUBLIC_APP_URL env var to https://your-app.com
• Update Stripe webhook endpoint to use the custom domain
• Redeploy (Vercel → Deployments → ⋮ → Redeploy)

Step 6: Preview deployments

Every PR you open on GitHub gets a preview deployment automatically. Vercel posts the URL as a PR comment. Useful for:

• Sharing in-progress work with collaborators
• Running smoke tests against a real deployment before merging
• A/B testing layout changes

Preview deployments use the Preview scope of your env vars. Make sure those are test-mode Stripe + Clerk so previews don't touch real payments or users.

CI before deploy

GlassKit's GitHub Actions CI runs before Vercel deploys:

1. PR opened → CI runs typecheck + lint + build
2. If CI passes → Vercel builds the preview
3. If CI fails → Vercel skips the build

To enforce this on the main branch:

1. GitHub → Repo → Settings → Branches → Add branch protection rule
2. Branch name pattern: main
3. Require status checks to pass before merging → enable
4. Required checks: CI
5. Save

Now main can't move without green CI.

Production checklist

Before announcing your launch:

• Custom domain pointed at Vercel, HTTPS green
• Stripe in live mode with production keys
• Live Stripe webhook configured + signing secret in Vercel
• Convex deployed to production with npx convex deploy --prod
• Clerk production instance configured (not the dev instance)
• Test purchase with a real card, then refund yourself
• Webhook fires and event shows in Stripe dashboard
• Email receipts deliver (check spam)
• /thanks or success page renders with the correct order details
• /docs loads without errors
• Vercel Analytics or Plausible installed for traffic data
• Sentry or similar for error tracking
• Robots.txt and sitemap.xml allow indexing
• Open Graph tags render correctly (test at opengraph.xyz)

Rollback

If a deploy breaks production:

1. Vercel → Deployments → find the last good deploy
2. Click ⋮ → Promote to Production
3. Live in ~10 seconds. No git revert needed.

This is one of the strongest arguments for Vercel — instant rollback gives you the confidence to ship fast.

Cost expectations

• Hobby plan (free): 100 GB bandwidth, no team, no commercial use → fine for testing
• Pro plan ($20/mo): 1 TB bandwidth, commercial use, team → what you actually want for launch
• Clerk: free up to 10K MAU, then $25/mo
• Convex: free up to 1 GB storage + 1M function calls/mo, then pay-as-you-go
• Stripe: 2.9% + 30¢ per transaction
• AI SDK costs: scale linearly with usage. See AI providers.

For an early-stage product with $10K in monthly revenue: ~$290 in Stripe fees, $20 Vercel, free Clerk + Convex. Sub-$350/mo total infra. Negligible against revenue.