Documentation

Deployment Guide

Learn how to deploy your Next.js application to production using Vercel and configure your deployment environment.

Vercel Deployment

Deploy your application to Vercel with zero configuration:

Option 1: Deploy from Git

Push your code to GitHub, GitLab, or Bitbucket
Import your repository on Vercel
Vercel will automatically detect Next.js and configure the build settings
Deploy with one click

Option 2: Deploy from CLI

terminalbash

1# Install Vercel CLI
2npm i -g vercel
3
4# Login to your account
5vercel login
6
7# Deploy to production
8vercel --prod

Option 3: Deploy with Git Integration

package.jsonjson

1# Add deployment script to package.json
2{
3  "scripts": {
4    "dev": "next dev",
5    "build": "next build",
6    "start": "next start",
7    "deploy": "vercel --prod"
8  }
9}

Environment Variables

Configure environment variables for your production deployment:

.env.productionbash

1# Production environment variables
2NEXT_PUBLIC_API_URL=https://api.your-app.com
3NEXT_PUBLIC_SITE_URL=https://your-app.com
4SUPABASE_URL=https://your-project.supabase.co
5SUPABASE_ANON_KEY=your-anon-key
6SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
7
8# Configure environment variables in vercel.json
9{
10  "env": {
11    "NEXT_PUBLIC_API_URL": "@next_public_api_url",
12    "NEXT_PUBLIC_SITE_URL": "@next_public_site_url",
13    "SUPABASE_URL": "@supabase_url",
14    "SUPABASE_ANON_KEY": "@supabase_anon_key",
15    "SUPABASE_SERVICE_ROLE_KEY": "@supabase_service_role_key"
16  }
17}

Add environment variables using the Vercel CLI:

terminalbash

1# Add a single environment variable
2vercel env add NEXT_PUBLIC_API_URL
3
4# Add multiple environment variables from a file
5vercel env pull .env.production

Monitoring

Monitor your application's performance and errors using Vercel Analytics and Error Tracking:

app/layout.tsxtsx

1import { Analytics } from '@vercel/analytics/react'
2import { ErrorBoundary } from '@vercel/edge-runtime'
3 
4export default function RootLayout({
5  children,
6}: {
7  children: React.ReactNode
8}) {
9  return (
10    <html lang="en">
11      <body>
12        <ErrorBoundary>
13          {children}
14          <Analytics />
15        </ErrorBoundary>
16      </body>
17    </html>
18  )
19}
20
21// Custom error reporting
22import { captureError } from '@vercel/analytics'
23
24try {
25  // Your code
26} catch (error) {
27  captureError(error, {
28    tags: {
29      route: '/api/data',
30      method: 'GET',
31    },
32  })
33}

Custom Domains

Configure custom domains and SSL certificates for your deployment:

package.jsonjson

1{
2  "name": "your-app",
3  "version": "1.0.0",
4  "scripts": {
5    "dev": "next dev",
6    "build": "next build",
7    "start": "next start"
8  },
9  "vercel": {
10    "domains": [
11      "your-app.com",
12      "www.your-app.com"
13    ],
14    "rewrites": [
15      {
16        "source": "/blog/:path*",
17        "destination": "https://blog.your-app.com/:path*"
18      }
19    ],
20    "redirects": [
21      {
22        "source": "/old-page",
23        "destination": "/new-page",
24        "permanent": true
25      }
26    ]
27  }
28}

Add a custom domain using the Vercel CLI:

terminalbash

1# Add a custom domain
2vercel domains add your-app.com
3
4# Add a subdomain
5vercel domains add www.your-app.com
6
7# List all domains
8vercel domains ls
9
10# Remove a domain
11vercel domains rm your-app.com