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.

Practice

1. What is the main reason to use environment variables in a Next.js production app?

easy

A. To keep sensitive data like API keys out of the codebase

B. To make the app load faster

C. To change the app's color scheme

D. To store user preferences permanently

Solution

1. Step 1: Understand environment variables purpose

   Environment variables store secrets and settings outside the code to keep them safe.

2. Step 2: Identify the main use in production

   In production, environment variables keep sensitive data like API keys hidden from the public.

3. Final Answer:

   To keep sensitive data like API keys out of the codebase -> Option A

4. Quick Check:

   Environment variables = keep secrets safe [OK]

Hint: Secrets belong outside code, use env vars [OK]

Common Mistakes:

• Thinking env vars speed up the app
• Using env vars for UI changes only
• Storing user data in env vars

2. Which syntax correctly accesses a public environment variable in Next.js code running in the browser?

easy

A. process.env.API_KEY

B. process.env.NEXT_API_KEY

C. process.env.NEXT_PUBLIC_API_KEY

D. process.env.PUBLIC_API_KEY

Solution

1. Step 1: Recall public env var naming rule

   Next.js requires public env vars to start with NEXT_PUBLIC_ to expose them to the browser.

2. Step 2: Match the correct syntax

   Only process.env.NEXT_PUBLIC_API_KEY follows this rule and is accessible in browser code.

3. Final Answer:

   process.env.NEXT_PUBLIC_API_KEY -> Option C

4. Quick Check:

   Public env vars start with NEXT_PUBLIC_ [OK]

Hint: Public vars must start with NEXT_PUBLIC_ [OK]

Common Mistakes:

• Using env vars without NEXT_PUBLIC_ prefix
• Assuming all env vars are accessible in browser
• Confusing NEXT_PUBLIC_ with PUBLIC_ prefix

3. Given this Next.js code snippet in production:

console.log(process.env.NEXT_PUBLIC_API_URL);

And the environment variable NEXT_PUBLIC_API_URL=https://api.example.com is set, what will be logged?

medium

A. https://api.example.com

B. undefined

C. process.env.NEXT_PUBLIC_API_URL

D. Error: Variable not found

Solution

1. Step 1: Check variable prefix and usage

   The variable starts with NEXT_PUBLIC_, so it is exposed to browser code and accessible via process.env.

2. Step 2: Confirm value assignment

   The variable is set to https://api.example.com, so logging it prints this string.

3. Final Answer:

   https://api.example.com -> Option A

4. Quick Check:

   Correct prefix + set value = logged value [OK]

Hint: NEXT_PUBLIC_ vars print their set value [OK]

Common Mistakes:

• Expecting undefined for public env vars
• Confusing variable name casing
• Assuming error if variable exists

4. You deployed a Next.js app but process.env.NEXT_PUBLIC_API_URL logs as undefined in production. What is the most likely cause?

medium

A. The variable is only defined in .env.local but not in production

B. The variable name is misspelled in the code

C. NEXT_PUBLIC_ prefix is missing in the variable name

D. The environment variable was not set on the production server

Solution

1. Step 1: Understand environment variable loading in production

   Next.js reads env vars from the production environment, so if the variable is missing there, it will be undefined.

2. Step 2: Check common causes of undefined

   If the variable is not set on the production server, the code logs undefined even if the code and prefix are correct.

3. Final Answer:

   The environment variable was not set on the production server -> Option D

4. Quick Check:

   Missing env var in production = undefined [OK]

Hint: Set env vars on production server, not just locally [OK]

Common Mistakes:

• Assuming code typo without checking env setup
• Ignoring missing variable on server
• Confusing local and production env files

5. You want to keep a secret API key only on the server side in a Next.js production app. Which approach is correct?

hard

A. Prefix the key with NEXT_PUBLIC_ and use it in client components

B. Define the key in .env.production without NEXT_PUBLIC_ prefix and access it only in server code

C. Store the key in a JSON file inside the public folder

D. Hardcode the key directly in client-side React components

Solution

1. Step 1: Understand server-only environment variables

   Variables without NEXT_PUBLIC_ prefix are only available on the server side, keeping secrets safe.

2. Step 2: Apply correct storage and usage

   Defining the key in .env.production without NEXT_PUBLIC_ and accessing it only in server code ensures it is not exposed to the browser.

3. Final Answer:

   Define the key in .env.production without NEXT_PUBLIC_ prefix and access it only in server code -> Option B

4. Quick Check:

   Server-only vars = no NEXT_PUBLIC_ prefix [OK]

Hint: No NEXT_PUBLIC_ means server-only secret [OK]

Common Mistakes:

• Exposing secrets by adding NEXT_PUBLIC_ prefix
• Storing secrets in public folder
• Hardcoding secrets in client code