Recommended

Vercel is the recommended deployment platform for Next.js applications like BetterLearn.

📋 Prerequisites

🚀 Deployment Steps

1

Import Project

Go to vercel.com/new and import your GitHub repository.

2

Configure Project

Vercel auto-detects Next.js. Leave framework preset as "Next.js".

3

Add Environment Variables

Expand "Environment Variables" and add all variables from your .env.local. Include both NEXT_PUBLIC_ and server-side variables.

4

Deploy

Click "Deploy". Vercel builds and deploys your application.

5

Configure Domain

Add a custom domain in Settings → Domains (optional).

🔧 Post-Deployment

Update Webhook URLs

After deployment, update external service webhooks:

  • Stripe Webhook: https://yourdomain.com/api/stripe-webhook
  • Clerk Webhook: https://yourdomain.com/api/webhooks/clerk

Update Clerk Settings

In Clerk dashboard, add your Vercel domain to allowed origins.

Update Environment Variable

Update NEXT_PUBLIC_APP_URL to your production URL.

🔄 Automatic Deployments

Vercel automatically deploys when you push to your main branch. Preview deployments are created for pull requests.

🔧 Troubleshooting

IssueSolution
Build fails Check build logs. Ensure all env variables are set.
500 errors on API routes Verify MONGODB_URI and other server-side vars.
Auth not working Update Clerk webhook and allowed origins.
💡
Pro Tip

Use Vercel's environment variable groups to manage different configs for production, preview, and development.