Environment variables in production in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are environment variables in Next.js used for?

Environment variables store configuration values like API keys or URLs outside the code. This keeps sensitive info safe and lets you change settings without changing code.

beginner

How do you name environment variables in Next.js to make them available in the browser?

You prefix them with NEXT_PUBLIC_. For example, NEXT_PUBLIC_API_URL will be accessible in client-side code.

intermediate

Where should you store environment variables for production in a Next.js app?

Store them in a .env.production file or set them directly in your hosting platform's environment settings (like Vercel dashboard).

beginner

Why should you never commit sensitive environment variables to your public code repository?

Because anyone can see your secrets like API keys or passwords. This risks security and misuse. Use environment files ignored by git or platform settings instead.

advanced

How does Next.js handle environment variables at build time versus runtime in production?

Next.js replaces environment variables at build time. So, you must rebuild your app if you change variables. For runtime changes, use platform features or serverless functions.

Which prefix makes an environment variable accessible in the browser in Next.js?

A NEXT_PUBLIC_

B PUBLIC_

C NEXT_

D CLIENT_

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

Where should you store production environment variables for a Next.js app?

A .env.local only

B .env.production or hosting platform settings

C Inside your React components

D In the public folder

Production variables go in .env.production or your hosting platform's environment settings.

What happens if you change environment variables after building a Next.js app?

A Next.js ignores environment variables

B Changes apply immediately without rebuild

C Variables update only on client side

D You must rebuild the app to apply changes

Next.js replaces env variables at build time, so rebuild is needed to update them.

Why should sensitive environment variables not be committed to git?

A They expose secrets and risk security

B They slow down the app

C They cause syntax errors

D They are ignored by Next.js

Committing secrets risks exposing keys and passwords publicly.

How do you access an environment variable named NEXT_PUBLIC_API_URL in Next.js client code?

A import from env file

B window.NEXT_PUBLIC_API_URL

C process.env.NEXT_PUBLIC_API_URL

D It is not accessible in client code

Client code accesses public env variables via process.env with the NEXT_PUBLIC_ prefix.

Explain how environment variables work in Next.js production and why they are important.

Think about how to keep secrets safe and how Next.js uses these variables when building.

Describe the steps to safely add and use a new API key as an environment variable in a Next.js production app.

Consider naming, storage, security, usage, and deployment.

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