Deploying Next.js Projects on Vercel

Vercel is made by the same team that built Next.js, which means the integration is deep - not just drag-and-drop hosting. Your Next.js features (ISR, Edge functions, Server Actions, streaming) work without configuration because Vercel's infrastructure is purpose-built for them. But 'zero config' doesn't mean zero decisions.

# Step 1: Connect Your Repository

1. 1Go to vercel.com and sign in with GitHub (or GitLab/Bitbucket).
2. 2Click 'Add New Project' and import your repository.
3. 3Vercel auto-detects Next.js and sets the correct build command (`next build`) and output directory.
4. 4Click Deploy. Your first production deployment takes about 60 seconds.

# Step 2: Environment Variables Done Right

This is where most first-time Vercel deployments fail. Your local `.env.local` file doesn't come with your code - and it shouldn't. Set environment variables in Vercel's dashboard under Project Settings → Environment Variables.

• Set variables for all three environments separately: Production, Preview, and Development.
• Never prefix server-only secrets with `NEXT_PUBLIC_` - that makes them visible in browser bundles.
• Only use `NEXT_PUBLIC_` for values the browser legitimately needs (e.g., public API URLs, analytics IDs).
• After adding variables, you must redeploy - Vercel bakes them into the build.

# .env.local (never commit this)
DATABASE_URL=mongodb+srv://...         # server only
OPENAI_API_KEY=sk-...                 # server only
NEXT_PUBLIC_SITE_URL=https://yoursite.com  # safe for browser
NEXT_PUBLIC_ANALYTICS_ID=UA-XXXXXXX       # safe for browser

# Step 3: Custom Domain and SSL

1. 1Go to Project Settings → Domains.
2. 2Add your domain (e.g., aboutmuhiu.info).
3. 3Vercel shows you DNS records to add at your domain registrar (usually an A record and CNAME).
4. 4SSL certificate is provisioned automatically via Let's Encrypt - no configuration needed.
5. 5DNS propagation takes 5 minutes to 48 hours depending on your registrar.

# Preview Deployments: Your Secret Weapon

Every branch and pull request gets its own live URL automatically. This means you can share a working link with a client or teammate before merging - no staging server, no manual deploy, no 'works on my machine'.

# Push a feature branch - Vercel automatically creates:
# https://your-project-feature-branch-abc123.vercel.app

git checkout -b feature/new-landing
git push origin feature/new-landing
# Vercel deploys it and posts the URL to your PR as a comment

# Performance Features You Should Actually Use

• Analytics - Vercel's built-in Web Vitals tracking. Free tier available. Shows real user LCP, FID, CLS.
• Speed Insights - page-level performance scores from real visitors, not just Lighthouse.
• Edge Config - ultra-fast key/value store for feature flags and A/B testing. Reads in ~1ms.
• ISR (Incremental Static Regeneration) - cache pages as static HTML, revalidate in the background. Best of SSG and SSR.
• Cron Jobs - schedule server-side tasks directly in Vercel without a separate worker service.