0Pricing
React Academy · Lesson

Deploying to Vercel: Zero-Config & Preview URLs

Connect a GitHub repo to Vercel, configure environment variables, and use preview deployments.

Deploying to Vercel: Zero-Config & Preview URLs is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Vercel?

Vercel is the platform built by the Next.js team. It offers zero-config deployment: connect a GitHub repo, and Vercel automatically detects the framework, builds, and deploys on every push.

Connecting a Repository

Import a GitHub/GitLab/Bitbucket repository from the Vercel dashboard. Vercel detects the framework (Next.js, Vite, CRA) and configures build settings automatically.

Project Settings

Vercel auto-detects: framework, build command (npm run build), output directory (.next, dist), and install command (npm install). Override these in the project settings if needed.

Environment Variables

Add environment variables in the Vercel dashboard under Project Settings → Environment Variables. Set different values for Production, Preview, and Development environments.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Preview Deployments

Every git branch push and pull request gets a unique preview URL (e.g., myapp-git-feature-xyz.vercel.app). Share it for review before merging — no manual staging environment needed.

Custom Domains

Add a custom domain in the Vercel dashboard. Point your DNS (A record or CNAME) to Vercel's IPs, and Vercel handles SSL certificate provisioning automatically.

vercel.json Configuration

Fine-tune deployment behavior: redirects, headers, rewrites, and region selection.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

Use the Vercel CLI to deploy from the terminal, pull env variables locally, and manage projects.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Serverless Functions

Files in api/ (Pages Router) or app/api/*/route.ts (App Router) automatically deploy as serverless functions on Vercel's edge or Node.js runtime.

Deploy Hooks

Create deploy hooks (webhook URLs) to trigger deployments from external services — useful for CMS content changes that should re-deploy the site.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Monorepo Deployment

In an Nx or Turborepo monorepo, set the Vercel root directory to the specific app folder and configure the build command to use the monorepo task runner.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Quick Check

What is a Vercel Preview Deployment?

Recap

Connect a Git repo to Vercel for zero-config deploys. Every branch gets a preview URL. Manage env vars per environment in the dashboard, use vercel.json for redirects/headers, and the Vercel CLI for terminal-based deploys and env pulling.

Frequently asked questions

Is the “Deploying to Vercel: Zero-Config & Preview URLs” lesson free?

Yes — the full text of “Deploying to Vercel: Zero-Config & Preview URLs” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Deploying to Vercel: Zero-Config & Preview URLs”?

Connect a GitHub repo to Vercel, configure environment variables, and use preview deployments. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Deploying to Vercel: Zero-Config & Preview URLs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Deploying to Vercel: Zero-Config & Preview URLs
  2. Hosting a React SPA on AWS S3 & CloudFront
  3. Dockerizing a React/Next.js App
  4. GitHub Actions CI/CD for React
← Back to React Academy