PProfessNet Academy
Vercel — deploying frontends/04core10 min

Environment variables and secrets

Secrets do not belong in the repository

API keys, connection strings, and tokens never go into Git. Vercel stores them as Environment Variables — encrypted, injected into the build and runtime, invisible in the code. This is the foundation of security hygiene.

Three environments

Vercel separates variables into three contexts. You can assign the same name to each with a different value:

EnvironmentWhen it is used
ProductionDeploy from main
PreviewPRs and branches other than main
DevelopmentLocal vercel dev
DATABASE_URL (Production) = postgres://prod...
DATABASE_URL (Preview)    = postgres://staging...

Public vs confidential — the key difference

In Next.js the NEXT_PUBLIC_ prefix is inlined into the browser bundle. Everything with this prefix is visible to every user in the page source.

  • NEXT_PUBLIC_API_URL — OK, it is a public address.
  • DATABASE_URL, STRIPE_SECRET_KEY — without the prefix, server-side only (API routes, Server Components).

Tip: The golden rule — no secret may have the NEXT_PUBLIC_ prefix. If a value is confidential, it must be available only on the server. A mistake here leaks the key to every visitor.

Adding variables

Through the panel

Project → Settings → Environment Variables. You enter the name, the value, and select the environments. After adding, a redeploy is required for the change to enter the build.

Through the CLI

# Add a variable for production
vercel env add STRIPE_SECRET_KEY production

# Pull all variables into a local .env.local
vercel env pull .env.local

# List variables
vercel env ls

Local development

Keep local secrets in .env.local and add it to .gitignore:

# .gitignore
.env.local
.env*.local

vercel env pull will fetch the values from the platform, so the whole team works on a consistent set without passing secrets through chats.

ProfessNet best practices

  1. Secrets only in Vercel, never in the repo — not even in a comment.
  2. Separate values for Production and Preview (the preview does not touch the prod DB).
  3. Rotate keys after a person with Team access leaves.
  4. After changing a variable, redeploy — the old build holds the old value.
  5. Minimize NEXT_PUBLIC_ to absolutely public data.

Summary

Vercel gives you an encrypted variable store split across three environments. Remember the boundary: NEXT_PUBLIC_ = visible to everyone, everything else = server only. Manage secrets through the panel or CLI, keep .env.local out of Git, and force a redeploy after every change.