Deploying React and Next.js Apps to Vercel: Step-by-Step Production Guide

Vercel is the primary cloud platform built by the creators of Next.js, and for good reason: it offers seamless continuous integration, global edge caching, preview environments on every Git branch, and zero-configuration serverless execution.

However, moving from a simple hobby deploy to a hardened production application requires attention to security headers, environment isolation, custom domain DNS, and build performance.

In this guide, I share the production checklist and step-by-step workflow I use to deploy client applications to Vercel with optimal speed and security.

Step 1: Connecting Your Git Repository

The most reliable way to manage Vercel deployments is through Git integration (GitHub, GitLab, or Bitbucket):

1. Sign in to your Vercel Dashboard.
2. Click "Add New..." ➔ "Project".
3. Import your Git repository.
4. Select your framework preset (e.g. Next.js or Vite). Vercel automatically detects build commands (npm run build) and output directories (.next or dist).

Step 2: Environment Variable Configuration and Security

Never hardcode API keys or database URLs into your repository. Vercel allows you to scope environment variables across three distinct environments:

• Production: Applied to the main branch (main or master).
• Preview: Applied to pull requests and feature branches.
• Development: Pulled locally using vercel env pull.

Crucial Security Rule for Next.js:

Variables prefixed with NEXT_PUBLIC_ are embedded into the client-side JavaScript bundle and are visible to anyone inspecting the browser source code.

• Public: NEXT_PUBLIC_SITE_URL, NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY
• Secret (Server Only): SUPABASE_SERVICE_ROLE_KEY, DATABASE_URL, RESEND_API_KEY, STRIPE_SECRET_KEY

Ensure that all secret keys are added without the NEXT_PUBLIC_ prefix so they remain strictly on the server.

Step 3: Hardening Security Headers in next.config.js

By default, web browsers permit framing and MIME sniffing unless explicitly restricted. Add production security headers to your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "X-Frame-Options",
            value: "DENY",
          },
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
          {
            key: "Permissions-Policy",
            value: "camera=(), microphone=(), geolocation=()",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Step 4: Connecting Custom Domains and DNS Records

To connect your custom domain (e.g. bahaj.dev):

1. Navigate to Project Settings ➔ Domains.
2. Enter your root domain and the www subdomain.
3. Configure your DNS records at your registrar (Cloudflare, Namecheap, GoDaddy):
   • Root domain (@): A record pointing to 76.76.21.21
   • Subdomain (www): CNAME record pointing to cname.vercel-dns.com

Vercel automatically issues and renews Let's Encrypt SSL certificates within minutes of DNS verification.

Step 5: Optimizing Build Time and Caching

Long build times slow down deployment pipelines. Keep your builds fast:

• Prune unused packages: Audit package.json dependencies periodically.
• Enable Incremental Static Regeneration (ISR): Render static pages at build time and revalidate them in the background without requiring a full site rebuild.
• Next.js Image Optimization: Use next/image to automatically serve WebP/AVIF images sized for the user's viewport.

For post-deployment verification and Core Web Vitals checks, review my Pre-Launch Website Audit Checklist and How to Read a Lighthouse Report. If your site is feeling sluggish, check Why Is My Next.js Site Slow?.

Need a modern, fast, and accessible web application deployed to production? Explore my frontend development services or get in touch to discuss your next build.