Back to Workshop resources
Vercel + Namecheap stack1 min read
Vercel environment variables — the safe way.
Don't commit secrets. Use Vercel's env var UI. Here's the pattern for development, preview, and production.
Overview
Environment variables are how you keep secrets (API keys, DB credentials) out of your repo. Vercel's UI lets you set them per environment (development, preview, production).
The basics
Settings → Environment Variables. Add each one with the value and which environments it applies to.
Naming conventions
Prefix client-visible vars with
NEXT_PUBLIC_ so Next.js exposes them to the browser. Anything not so prefixed is server-only.Local development
Create .env.local in your repo (gitignored). Add the same vars. Run
vercel env pull .env.local to sync from Vercel automatically. PreviousVercel preview deployments — why they're a productivity unlock.Next Vercel custom domains — adding your real URL.
Want to Apply This to Your Business?
We're a Singapore AI development and automation agency. Let's discuss how we can help solve your specific challenges.