Environment variables in production in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access an environment variable in a Next.js component.

NextJS

const apiUrl = process.env.[1];

Drag options to blanks, or click blank then click option'

APUBLIC_API_URL

BAPI_URL

CNEXT_PUBLIC_API_URL

DNEXT_API_URL

Attempts:

3 left

💡 Hint

Common Mistakes

Using environment variables without the NEXT_PUBLIC_ prefix for client-side code.

Trying to access server-only variables in the browser.

In Next.js, environment variables that need to be exposed to the browser must start with NEXT_PUBLIC_.

2fill in blank

medium

Complete the code to load environment variables from a .env file in Next.js.

NextJS

export default function handler(req, res) {
  const secret = process.env.[1];
  res.status(200).json({ secret });
}

Drag options to blanks, or click blank then click option'

ANEXT_PUBLIC_SECRET

BSECRET_KEY

CNEXT_SECRET_KEY

DSECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Using NEXT_PUBLIC_ prefix for server-only variables.

Not importing dotenv/config when needed in custom server code.

Server-side environment variables can be accessed directly without the NEXT_PUBLIC_ prefix.

3fill in blank

hard

Fix the error in the code to correctly use environment variables in Next.js API route.

NextJS

export default function handler(req, res) {
  const dbPassword = process.env.[1];
  res.status(200).json({ dbPassword });
}

Drag options to blanks, or click blank then click option'

ANEXT_PUBLIC_DB_PASSWORD

BDB_PASSWORD

CPUBLIC_DB_PASSWORD

DDATABASE_PASSWORD

Attempts:

3 left

💡 Hint

Common Mistakes

Using NEXT_PUBLIC_ prefix for server-only environment variables.

Trying to access variables that are not defined in .env.

Server-side code should use the exact environment variable name without the NEXT_PUBLIC_ prefix.

4fill in blank

hard

Fill both blanks to create a client-side component that safely uses a public environment variable.

NextJS

export default function ApiUrl() {
  const apiUrl = process.env.[1];
  return <p>API URL is: [2]</p>;
}

Drag options to blanks, or click blank then click option'

ANEXT_PUBLIC_API_URL

BAPI_URL

C{apiUrl}

DapiUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using server-only variables in client components.

Not wrapping variables correctly in JSX.

Use NEXT_PUBLIC_API_URL to access the variable and {apiUrl} inside JSX with braces to display the value.

5fill in blank

hard

Fill all three blanks to create a server-side function that reads and returns environment variables.

NextJS

export async function getServerSideProps() {
  const secret = process.env.[1];
  const publicKey = process.env.[2];
  return {
    props: { secret, [3] }
  };
}

Drag options to blanks, or click blank then click option'

ASECRET_KEY

BNEXT_PUBLIC_KEY

CpublicKey

DNEXT_PUBLIC_SECRET

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up server and public environment variable names.

Returning props with incorrect keys.

Server-side code accesses SECRET_KEY directly, public variables start with NEXT_PUBLIC_, and the returned props must match variable names.

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