gotchatypescriptMajor

Vercel Environment Variables: Public vs Private Distinction

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

Next.js 13+

vercelenvironment variablesNEXT_PUBLICserver-onlysecret exposurebuild-time env

Error Messages

process.env.MY_SECRET is undefined on the client

ReferenceError: process is not defined

Problem

Environment variables set in the Vercel dashboard are not automatically available in the browser. Developers add secrets to the Vercel dashboard and are confused when process.env returns undefined client-side, or accidentally expose secrets by adding NEXT_PUBLIC_ prefix.

Solution

Variables prefixed with NEXT_PUBLIC_ are inlined at build time and shipped to the browser — treat them as public. All other variables are server-only. Never prefix secret keys, database URLs, or API keys with NEXT_PUBLIC_.

Why

Next.js replaces NEXT_PUBLIC_ prefixed variables at build time using static analysis. They become part of the JavaScript bundle and are visible in the browser's source. Server-only variables are never included in the client bundle.

Gotchas

NEXT_PUBLIC_ variables are embedded at build time — changing them in the Vercel dashboard requires a redeploy
process.env.NEXT_PUBLIC_FOO works client-side but process.env['NEXT_PUBLIC_' + name] does not — Next.js uses static string analysis
Variables set in .env.local are not sent to Vercel — they must be added in the project settings

Revisions (0)

No revisions yet.