Environment variables in production in NextJS - Mini Project: Build & Apply

Environment variables in production

📖 Scenario: You are building a Next.js app that needs to use API keys safely in production. Environment variables help keep API keys out of your source code.

🎯 Goal: Create a Next.js app that reads an API key from environment variables and displays a message using that key on the homepage.

📋 What You'll Learn

Create a file to hold environment variables

Add a variable for the API key

Access the environment variable in a Next.js page

Display the API key value on the homepage

💡 Why This Matters

🌍 Real World

Many web apps need to configure API keys without hardcoding them in the code. Environment variables let you do this securely in production.

💼 Career

Understanding environment variables is essential for deploying real-world Next.js apps and working with cloud platforms or CI/CD pipelines.

1

Create the environment variable file

Create a file named .env.production in the root of your Next.js project. Inside it, add the line NEXT_PUBLIC_API_KEY=prod_key_123 exactly as shown.

NextJS

# Create the .env.production file with the API key
# Your code here

Hint

This file stores environment variables for production. The variable name must start with NEXT_PUBLIC_ to be accessible in the browser.

2

Create the Next.js page to use the variable

In the app/page.tsx file, create a React functional component named Page. Inside it, create a constant apiKey that reads the environment variable process.env.NEXT_PUBLIC_API_KEY.

NextJS

export default function Page() {
  // Create a constant apiKey to read process.env.NEXT_PUBLIC_API_KEY
  // Your code here
}

Hint

Use const apiKey = process.env.NEXT_PUBLIC_API_KEY; inside the component to access the variable.

3

Display the API key on the homepage

Inside the Page component, return a <main> element containing a <p> tag that shows the text "The API key is: " followed by the apiKey value.

NextJS

export default function Page() {
  const apiKey = process.env.NEXT_PUBLIC_API_KEY;
  // Return main with a paragraph showing the API key
  // Your code here
}

Hint

Use JSX to return the main and paragraph elements with the API key inside curly braces.

4

Add metadata for accessibility and SEO

Add a metadata export in app/page.tsx with a title set to 'API Key Display' and a description set to 'Shows the API key from environment variables.'.

NextJS

export const metadata = {
  // Add title and description here
};

export default function Page() {
  const apiKey = process.env.NEXT_PUBLIC_API_KEY;
  return (
    
      The API key is: {apiKey}
    
  );
}

Hint

Export a constant named metadata with the required title and description fields.

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