JAICYLAB
Start a Project
VERCEL

Vercel
Deploy & Custom Domain

A guide to deploying your frontend on Vercel, the company behind Next.js. Covers GitHub integration, environment variables, custom domains, Preview deployments, and Functions — all focused on real-world workflows.

Open Vercel DashboardView steps

Hobby plan

Free for personal use

Pro plan

$20/mo/user

Requirements

GitHub account

Overview

Check before you start

The Hobby plan prohibits commercial use. Company projects must use Pro or higher to stay compliant with the ToS. Custom domains work on the free plan, but team collaboration, analytics, and security features start with Pro.

GitHub repo

The project repository to deploy.

Domain registrar

Whois, Gabia, Cloudflare, etc.

Separate env vars

Never commit .env.local.

Region selection

Functions default to icn1 (Seoul).

Step by Step

Step-by-step Guide

01

SIGNUP

Sign up

Create an account at vercel.com.

  • Sign Up with GitHub is recommended (smoothest integration)
  • GitLab, Bitbucket, and email also work
  • Starts automatically on the Hobby plan
  • Create an organization if you need a Team
02

CONNECT

Connect Git repository

Link GitHub with Vercel.

  • Click Import Git Repository
  • Install the Vercel GitHub App (all or selected repos)
  • Select a repo — framework is auto-detected
  • Supports Next.js, Nuxt, Vite, SvelteKit, and more
03

ENV

Configure environment variables

Register required env vars before deploy.

  • Settings > Environment Variables
  • Three scopes: Production / Preview / Development
  • The NEXT_PUBLIC_ prefix bundles the value into the client (never put secrets here)
  • Server-only vars have no prefix (DATABASE_URL, API_SECRET, etc.)
  • Sync to local .env.local with vercel env pull
04

DEPLOY

First deploy & Preview URL

Push to main for an automatic Production deploy.

  • Pushing to main (or the Production Branch) triggers an auto-deploy
  • Other branches and PRs automatically get a Preview URL
  • Preview URL: https://${project}-${branch}-${team}.vercel.app
  • Deploy status is posted as a comment on GitHub PRs
  • You can also deploy manually with the vercel CLI
05

DOMAIN

Connect custom domain

Attach your domain to the project.

  • Project Settings > Domains
  • Enter the domain — Vercel shows the required DNS records
  • Apex domain: A record 76.76.21.21
  • www subdomain: CNAME cname.vercel-dns.com
  • Or switch nameservers to Vercel (ns1.vercel-dns.com / ns2.vercel-dns.com)
  • SSL certificates (Let's Encrypt) are issued and renewed automatically
06

SECURITY

Deployment Protection (optional)

Hide preview URLs from the public.

  • Settings > Deployment Protection
  • Vercel Authentication (team-only access)
  • Password Protection (Pro and above)
  • Use a Bypass Token for E2E tests and agent access
  • Useful for staging and pre-release reviews
07

FUNCTIONS

Functions & regions

Configure Serverless and Edge Functions.

  • Default region: icn1 (Seoul) — recommended for Korean services
  • Configure via runtime export in next.config.js or vercel.json
  • Fluid Compute is tuned for long I/O work (LLMs, APIs)
  • Tune maxDuration, memory, and CPU
  • The Edge Runtime does not support all Node.js APIs — verify compatibility
08

ANALYTICS

Analytics & monitoring

Enable visitor and performance metrics.

  • Web Analytics: visitors and pageviews (cookieless)
  • Speed Insights: real-user Core Web Vitals
  • Check Function logs in Vercel Logs
  • Forward to external APMs via OpenTelemetry
  • Both are free with limited quotas, even on Hobby

Pitfalls

Common blockers

Commercial use on Hobby

Running a company site or paid service on Hobby violates the ToS. Upgrade to at least Pro ($20/mo).

Misusing NEXT_PUBLIC_

Anything with this prefix ends up in the browser bundle. Never prefix DATABASE_URL or API_SECRET with NEXT_PUBLIC_.

Edge Runtime compatibility

Node-only modules like pg, bcrypt, and fs do not run on the Edge. Use the Node.js runtime or switch to serverless.

Committing .env.local

It is in .gitignore, but once committed it stays in history. Rotate keys immediately.

Changing the Production Branch

Switching the Production Branch away from main moves your domain to that branch. Avoid mistakes.

Resources

Official links

Vercel Dashboard

Project management

Pricing

Hobby / Pro / Enterprise

Custom Domains

Domain setup guide

Environment Variables

Manage env vars

Functions

Serverless · Edge · Fluid

AI Gateway

Model routing gateway

If setup is a headache, we'll handle it

Projects at JAICYLAB include everything from developer account setup to launch and ops.

Ask us to handle it More guides