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.