Sign in
Skip to solution
mediumSystem Design

What is the difference between build-time and runtime environment variables in Next.js?

721 views
01

Understand the problem

Inlined-at-build vs read-at-request values.

nextjsenv-varsbuild-timeruntime
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

NEXT_PUBLIC_ vars are inlined at build time, so changing them requires a rebuild. Server-only vars read from process.env at runtime can change per environment without rebuilding (for dynamically-rendered code). This matters for Docker images promoted across environments.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Runtime server var vs build-time public var
// Runtime (server, dynamic route) — same build, different envs:
export const dynamic = 'force-dynamic';
export default async function Page() {
  const region = process.env.REGION;        // read at runtime
  return <p>{region}</p>;
}

// Build-time (client) — inlined; rebuild to change:
// <span>{process.env.NEXT_PUBLIC_VERSION}</span>
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 41 of 95 decoded in the Next.js track. One more won't hurt.

Back to track