Sign in
Skip to solution
easyFrontend

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

1.0k views
01

Understand the problem

Server-only vs browser-exposed env vars.

nextjsenv-varsnext-publicconfiguration
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

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.

Solution ready — 2 min read

Classified // press E to declassify

04

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
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 2 of 95 decoded in the Next.js track. One more won't hurt.

Back to track