Deploy Frontend to Vercel¶¶

Vercel is the recommended platform for deploying the Next.js frontend. It offers seamless integration, automatic deployments, and edge functions.

Prerequisites¶¶

• Vercel account

• GitHub repository with your code

• Backend deployed and accessible

Quick Deploy¶¶

1. Import Project¶¶

1. Go to vercel.com/new

2. Import your Git repository

3. Select the frontend directory as the root

4. Click Deploy

2. Configure Environment Variables¶¶

In Vercel dashboard, go to Settings → Environment Variables and add:

Variable
Value
Description

NEXT_PUBLIC_API_URL https://your-backend.fly.devBackend API URL

NEXT_PUBLIC_APP_URL https://your-app.vercel.appFrontend URL

3. Redeploy¶¶

After setting environment variables, trigger a new deployment:

Code

    `vercel `--prod

Or push a new commit to trigger automatic deployment.

Project Configuration¶¶

vercel.json¶¶

Create frontend/vercel.json for custom configuration:

Code

    `{

` “framework”: “nextjs”,
“buildCommand”: “pnpm build”,
“outputDirectory”: “.next”,
“installCommand”: “pnpm install”,
“rewrites”: [
{
“source”: “/api/:path”,
“destination”: “https://your-backend.fly.dev/api/:path“
}
],
“headers”: [
{
“source”: “/(.*)”,
“headers”: [
{
“key”: “X-Frame-Options”,
“value”: “DENY”
},
{
“key”: “X-Content-Type-Options”,
“value”: “nosniff”
}
]
}
]
}

Environment Variables¶¶

Required Variables¶¶

Code

NEXT_PUBLIC_API_URL=https://your-backend.fly.dev`\
NEXT_PUBLIC_APP_URL=https://your-app.vercel.app`\
\
`# Analytics (optional)`\
`NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX`\
\
`# Feature Flags (optional)`\
`NEXT_PUBLIC_ENABLE_ANALYTICS=true`

Setting Variables via CLI¶¶

Code

    `vercel `env add NEXT_PUBLIC_API_URL production

Enter the value when prompted¶

Pull Environment to Local¶¶

Code

    `vercel `env pull .env.local

Custom Domain¶¶

1. Add Domain¶¶

1. Go to Settings → Domains

2. Enter your domain (e.g., app.your-domain.com)

3. Click Add

2. Configure DNS¶¶

Add the DNS records shown by Vercel to your domain provider:

Type
Name
Value

CNAME
app
cname.vercel-dns.com

Or for apex domain:

Type
Name
Value

A
@
76.76.21.21

3. SSL Certificate¶¶

Vercel automatically provisions SSL certificates. No action needed.

Preview Deployments¶¶

Vercel creates preview deployments for every pull request:

• Each PR gets a unique URL

• Comment on PR with deployment status

• Easy to share for review

Protect Preview Deployments¶¶

Enable authentication for previews:

1. Go to Settings → Deployment Protection

2. Enable Vercel Authentication

Monitoring¶¶

Analytics¶¶

Enable Vercel Analytics:

1. Go to Analytics tab

2. Click Enable

Speed Insights¶¶

Enable performance monitoring:

Install package:
bash pnpm add @vercel/speed-insights

Add to layout:
```tsx
import { SpeedInsights } from ‘@vercel/speed-insights/next’;

export default function RootLayout({ children }) {
return (

       {children}



 );

}
```

Edge Functions¶¶

For serverless functions at the edge:

Code

    `// app/api/edge-function/route.ts

`export const runtime = ‘edge’;

export async function GET() {
return new Response(‘Hello from the edge!’);
}

Troubleshooting¶¶

Build Errors¶¶

Check build logs:

Code

    `vercel `logs your-deployment-url

Environment Variables Not Working¶¶

1. Ensure variables are prefixed with NEXT_PUBLIC_ for client-side access

2. Redeploy after adding variables

3. Check variable scope (Production/Preview/Development)

Cache Issues¶¶

Force a clean build:

1. Go to Settings → General

2. Click Clear Build Cache

3. Redeploy

CI/CD with GitHub Actions¶¶

Code

    `# .github/workflows/deploy.yml

`name: Deploy to Vercel

on:
push:
branches: [main]

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.ORG_ID }}
vercel-project-id: ${{ secrets.PROJECT_ID }}
working-directory: ./frontend

Next Steps¶¶

• Deploy Backend to Fly.io

• Database Setup