Environment variables are essential in Vercel’s v0 projects. They let your app adapt securely across dev, preview, and production — without changing code. This guide covers how to manage them in Next.js (v0), including .env files, secrets, client/server access, and local workflows.
1. .env vs Vercel env
.env files work locally. Vercel’s dashboard env vars are for deployed apps.
| Feature | Vercel Env Vars | .env Files (Next.js) |
|---|---|---|
| Scope | Project-wide or team-wide | Local to dev machine |
| Access | Dashboard, CLI | Code repo |
| Security | Encrypted, can be marked as Sensitive | Risky if not ignored in Git |
| Change Activation | Needs redeploy | Needs server restart |
| Use Case | Production/preview secrets | Local dev config |
Use both — Vercel for deployed configs, .env.local for dev.
2. secrets best practices
Protect your API keys, tokens, and credentials:
- ✅ Mark secrets as Sensitive in Vercel (can’t be read later)
- ✅ Keep secrets server-only — don’t prefix with
NEXT_PUBLIC_ - ❌ Never commit
.env.local— always Git-ignore it - ✅ Prefer server actions, API routes, or server components to use secrets
- ✅ For stricter security, integrate secrets managers (e.g. Vault, Doppler)
3. local dev tips
For smooth development:
- Create a
.env.localfile at your project root - Add it to
.gitignore - Use
vercel env pullto sync dev vars from Vercel:
vercel env pull --environment=development- Or use
vercel dev— it auto-loads env vars on start
Restart your dev server after edits.
4. accessing env vars in code
Server-side (secure):
const db = process.env.DATABASE_URLAvailable in:
- API routes
- Server actions
- Server components
getServerSideProps
Client-side (public only):
const baseUrl = process.env.NEXT_PUBLIC_API_BASEOnly env vars starting with NEXT_PUBLIC_ get exposed to the browser.
5. syncing with v0 settings
v0 lets you define env vars through its UI. If your project is connected to Vercel:
- Changes in v0 sync to Vercel env vars
- You might need to manually sync or redeploy to apply them
- Some users report occasional desync bugs — double check both places
If you use a v0 integration (e.g. Supabase), the platform may prompt you to auto-add needed vars.
6. platform limits & updates (2025)
Keep these Vercel limits in mind:
- 📦 Max 64KB total env vars per runtime (Node.js, Go, etc.)
- 📁 Max 64KB per individual var
- 🌐 Edge functions = 5KB max per var
- 🔢 Max 1000 vars per project environment
Also new in Next.js 15:
- Route handlers no longer cached by default
unstable_after()for deferred logic (can use env vars)- Bugs reported for
NEXT_PUBLIC_+ Turbopack (test thoroughly)
FAQ
Should I use .env or the Vercel dashboard?
Use Vercel for production & secrets. Use .env.local for local dev.
What does NEXT_PUBLIC_ do?
It exposes the env var to the browser — only use it when needed.
Why aren’t my vars working?
You likely need to redeploy or restart. Or you edited the wrong env scope.
Do v0 and Vercel sync automatically?
Sometimes. Check both — syncing may fail silently.
Up Next: Creating a REST API for v0 with Next.js →
Explore: Why Every v0 Project Needs a Service Layer →
