How do environment variables work in Next.js, and what does the NEXT_PUBLIC_ prefix do?

Next.js loads env files into process.env, and keeps them server-only by default. The NEXT_PUBLIC_ prefix exposes a variable to the browser.

Next.js loads variables from these files into process.env:

• .env
• .env.local
• environment-specific files like .env.production

By default the variables are available only on the server. So Server Components, Route Handlers and Server Actions can use secrets safely.

Variables with the NEXT_PUBLIC_ prefix are exposed to the browser. Their values are inlined (written directly) into the JavaScript bundle at build time. So they are public, and changing them later needs a rebuild.

Rules:

• Never put secrets in a NEXT_PUBLIC_ variable.
• Keep .env.local out of git.
• If a client value must change per environment without a rebuild, read it on the server and pass it down.