How to Deploy Next.js Apps on Vercel Professionally

Why Vercel is the default for Next.js

Vercel created Next.js and optimizes the platform for it. Zero-config deployments, automatic preview URLs per PR, edge caching, image optimization, and built-in analytics. For Web3 dashboards and portfolio sites, Vercel handles the infrastructure so you focus on product.

Connecting your GitHub repo

# Option 1: Vercel Dashboard
# 1. Go to vercel.com/new
# 2. Import your GitHub repository
# 3. Vercel auto-detects Next.js and configures build settings

# Option 2: Vercel CLI
npm i -g vercel
vercel login
vercel link
vercel

Vercel automatically sets the build command (next build), output directory (.next), and install command (npm install) for Next.js projects.

Environment variables

Never commit secrets. Set environment variables in the Vercel dashboard or via CLI.

# Set production environment variables
vercel env add ALCHEMY_SERVER_URL production
vercel env add NEXT_PUBLIC_WC_PROJECT_ID production

# Pull env vars for local development
vercel env pull .env.local

Naming convention: prefix client-side variables with NEXT_PUBLIC_. Keep RPC URLs and API keys server-side only (no NEXT_PUBLIC_ prefix).

// Server-side only (safe)
const rpcUrl = process.env.ALCHEMY_SERVER_URL;

// Client-side (exposed in browser)
const wcProjectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID;

Preview deployments

Every pull request automatically gets a unique preview URL. This is invaluable for client reviews and QA testing.

# .github/workflows/preview-check.yml (optional CI enhancement)
name: Preview Check
on: pull_request
jobs:
  lint-and-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npm run lint
      - run: npm run build

Share the Vercel preview URL with clients for approval before merging to production.

Production deployments

Pushes to your main branch automatically deploy to production. Configure your production domain in the Vercel dashboard.

// vercel.ts — recommended project configuration
import { routes, type VercelConfig } from '@vercel/config/v1';

export const config: VercelConfig = {
  framework: 'nextjs',
  headers: [
    routes.cacheControl('/api/public/(.*)', { public: true, maxAge: '1 minute', staleWhileRevalidate: '5 minutes' }),
  ],
};

Custom domains and DNS

Add your domain in Vercel → Settings → Domains. Vercel provides DNS records to configure:

- Apex domain (example.com): A record pointing to 76.76.21.21 - Subdomain (www.example.com): CNAME to cname.vercel-dns.com

Vercel automatically provisions SSL certificates. DNS propagation takes up to 48 hours but usually completes in minutes.

Common deployment mistakes

Deploying with NEXT_PUBLIC_ prefixed secrets (exposes API keys in the browser bundle). Not setting environment variables before the first deploy. Building successfully locally but failing on Vercel due to missing env vars. Not testing preview deployments before merging. Forgetting to configure custom domains and leaving the default vercel.app URL. Not enabling Vercel Analytics to monitor production performance.

# Debug build failures
vercel logs <deployment-url>
vercel inspect <deployment-url>

FAQ

**Can I deploy without GitHub?** Yes. Use vercel CLI to deploy directly from your local machine. Git integration is recommended for CI/CD.

**How do I roll back a bad deployment?** Vercel dashboard → Deployments → click the previous working deployment → "Promote to Production."

**Should I use vercel.json or vercel.ts?** vercel.ts is the recommended approach in 2026. TypeScript support, dynamic logic, and environment variable access.

**What about Web3 apps that need WebSockets?** Vercel Functions support WebSocket via serverless. For persistent connections, consider a dedicated WebSocket server on a separate service and keep the Next.js frontend on Vercel.

**How do I handle different environments?** Vercel supports Production, Preview, and Development environments with separate environment variables for each.