Environment variables in production in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js handle environment variables in production?

Consider a Next.js app deployed to production with environment variables defined in a .env.production file. Which statement best describes how these variables are accessed in the client-side code?

A Only variables prefixed with NEXT_PUBLIC_ are exposed to client-side code.

B All environment variables from .env.production are automatically available on the client side.

C Environment variables must be imported from the .env.production file directly in client components.

D Client-side code cannot access any environment variables in Next.js.

💡 Hint

Think about security and what Next.js exposes to the browser.

Next.js only exposes environment variables prefixed with NEXT_PUBLIC_ to client-side code. This prevents accidental exposure of sensitive data.

📝 Syntax

intermediate

Correct syntax to access environment variables in Next.js server code

Which option shows the correct way to access an environment variable named API_SECRET in Next.js server-side code?

A const secret = window.env.API_SECRET;

B const secret = import.meta.env.API_SECRET;

C const secret = process.env.NEXT_PUBLIC_API_SECRET;

D const secret = process.env.API_SECRET;

💡 Hint

Server code uses Node.js environment variables.

Server-side code accesses environment variables via process.env.VARIABLE_NAME. The NEXT_PUBLIC_ prefix is for client-side only.

🔧 Debug

advanced

Why is my client-side environment variable undefined in production?

You have NEXT_PUBLIC_API_URL defined in your .env.production file. In your React component, you use process.env.NEXT_PUBLIC_API_URL but it is undefined after deployment. What is the most likely cause?

A Environment variables cannot be used in React components.

B You need to import the .env.production file manually in your component.

C You forgot to rebuild the Next.js app after adding the variable.

D You must prefix the variable with REACT_APP_ instead of NEXT_PUBLIC_.

💡 Hint

Think about when Next.js loads environment variables.

Next.js loads NEXT_PUBLIC_ environment variables at build time for client-side code. If you add or change them, you must rebuild the app to see changes after deployment.

🧠 Conceptual

advanced

Security implications of environment variables in Next.js production

Which statement best explains why sensitive environment variables should NOT be prefixed with NEXT_PUBLIC_ in Next.js?

A Prefixing with NEXT_PUBLIC_ hides variables from the client but exposes them in server logs.

B Variables prefixed with NEXT_PUBLIC_ are embedded in the client-side JavaScript and visible to anyone using the app.

C NEXT_PUBLIC_ variables are only accessible on the server and never sent to the client.

D NEXT_PUBLIC_ variables are encrypted automatically by Next.js.

💡 Hint

Consider what code runs in the browser.

Any environment variable prefixed with NEXT_PUBLIC_ is included in the JavaScript sent to the browser, so sensitive data must never use this prefix.

❓ state_output

expert

What is the value of process.env.NODE_ENV in a Next.js production build?

After running next build and deploying your Next.js app, what is the value of process.env.NODE_ENV during runtime in production?

A "production"

B undefined

C "development"

D "test"

💡 Hint

NODE_ENV indicates the environment mode.

When Next.js builds for production, it sets process.env.NODE_ENV to "production" to optimize performance and behavior.

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