Environment variables in production in NextJS - Step-by-Step Execution

Concept Flow - Environment variables in production

Start: Build Next.js app

↓

Load .env.production file

↓

Inject env vars into build

↓

Deploy app to production server

↓

App reads process.env.VAR at runtime

↓

Render pages using env vars

↓

User sees content based on env vars

↓

End

This flow shows how Next.js loads environment variables from .env.production during build, injects them, and uses them at runtime in production.

Execution Sample

NextJS

console.log(process.env.NEXT_PUBLIC_API_URL);

export default function Page() {
  return <div>{process.env.NEXT_PUBLIC_API_URL}</div>;
}

This code logs and displays a public environment variable set for production.

Execution Table

Step	Action	Environment Variable Loaded	Value	Effect
1	Start build process	NEXT_PUBLIC_API_URL	undefined	No value yet
2	Load .env.production	NEXT_PUBLIC_API_URL	https://api.prod.example.com	Value loaded for production
3	Inject env vars into build	NEXT_PUBLIC_API_URL	https://api.prod.example.com	Value embedded in build
4	Deploy app	NEXT_PUBLIC_API_URL	https://api.prod.example.com	App ready with env vars
5	Run app in production	NEXT_PUBLIC_API_URL	https://api.prod.example.com	Env var accessible in code
6	Render page	NEXT_PUBLIC_API_URL	https://api.prod.example.com	Page shows API URL
7	User views page	NEXT_PUBLIC_API_URL	https://api.prod.example.com	User sees correct API URL
8	End	-	-	Execution complete

💡 Build and deployment complete, environment variables correctly loaded and used in production.

Variable Tracker

Variable	Start	After Load .env.production	After Inject	After Deploy	After Runtime	Final
NEXT_PUBLIC_API_URL	undefined	https://api.prod.example.com	https://api.prod.example.com	https://api.prod.example.com	https://api.prod.example.com	https://api.prod.example.com

Key Moments - 3 Insights

Why is NEXT_PUBLIC_API_URL undefined before loading .env.production?

Because environment variables are not set until Next.js loads the .env.production file during build, as shown in step 2 of the execution_table.

Why must environment variables start with NEXT_PUBLIC_ to be accessible in the browser?

Next.js only exposes variables prefixed with NEXT_PUBLIC_ to client-side code for security, as seen in the code example and runtime steps.

What happens if you change .env.production after build?

Changes won't affect the running app until you rebuild and redeploy, since env vars are injected at build time (step 3).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of NEXT_PUBLIC_API_URL at step 1?

A undefined

B https://api.prod.example.com

C null

D '' (empty string)

💡 Hint

Check the 'Environment Variable Loaded' column at step 1 in the execution_table.

At which step does Next.js embed the environment variable into the build?

A Step 2

B Step 3

C Step 5

D Step 7

💡 Hint

Look for the action 'Inject env vars into build' in the execution_table.

If you rename .env.production to .env.prod, what will happen during build?

A Env vars load normally

B Build will fail with error

C Env vars won't load automatically

D Env vars load but with empty values

💡 Hint

Next.js loads .env.production by default; renaming it means step 2 won't load vars as shown in execution_table.

Concept Snapshot

Next.js loads environment variables from .env.production during build.
Variables prefixed with NEXT_PUBLIC_ are exposed to client-side code.
Env vars are injected at build time, so changes require rebuild.
Use process.env.NEXT_PUBLIC_VAR to access them in code.
This ensures secure and consistent config in production.

Full Transcript

This visual execution trace shows how Next.js handles environment variables in production. First, the build process starts with no env vars loaded. Then, Next.js loads the .env.production file and reads variables like NEXT_PUBLIC_API_URL. These variables are injected into the build so that the deployed app can access them at runtime. The app renders pages using these variables, and users see content based on them. Key points include that variables must start with NEXT_PUBLIC_ to be available in the browser, and that changes to .env.production require rebuilding the app to take effect. The execution table tracks each step from build start to user view, showing how the variable value changes from undefined to the production URL. This helps beginners understand when and how environment variables become available in a Next.js production app.