How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

Q: How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

**TL;DR.** Variables in .env are available on the **server** via process.env . **Only** those prefixed NEXT_PUBLIC_ are **inlined into the client bundle** and exposed to the browser — so **never prefix secrets**. Next.js loads .env.local / .env.production etc. by convention. server-only DATABASE_URL, API_KEY process.env (server) never sent to browser <text class='d-text' x='340' y='54' text-an

1.0k views

Understand the problem

Server-only vs browser-exposed env vars.

nextjsenv-varsnext-publicconfiguration

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Server secret vs public var

// .env.local
DATABASE_URL=postgres://...          # server-only (secret)
NEXT_PUBLIC_API_URL=https://api.example.com   # inlined into the browser

// server (Server Component / Route Handler)
const db = connect(process.env.DATABASE_URL);      // ✅ secret stays server-side

// client component
'use client';
fetch(process.env.NEXT_PUBLIC_API_URL + '/ping');  // ✅ public var, visible to users

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does client-side navigation work in Next.js (next/link and useRouter)?