Environment variables in production in NextJS

Introduction

Environment variables let you keep secret or changing information outside your code. In production, they help keep your app safe and flexible.

You want to hide API keys so others can't see them.

You need to change settings like database URLs without changing code.

You want to keep different settings for development and production.

You want to avoid putting passwords or secrets directly in your code.

You want to update configuration without redeploying your app.

Syntax

NextJS

NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_PASSWORD=supersecretpassword

Variables starting with NEXT_PUBLIC_ are exposed to the browser.

Other variables are only available on the server side.

Examples

This file holds environment variables for production. The NEXT_PUBLIC_API_URL is accessible in the browser, but DATABASE_PASSWORD is only on the server.

NextJS

# .env.production
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_PASSWORD=supersecretpassword

You can access public environment variables in your React components using process.env.NEXT_PUBLIC_API_URL.

NextJS

console.log(process.env.NEXT_PUBLIC_API_URL)
// prints the API URL in the browser

Server-only variables like DATABASE_PASSWORD are accessible in API routes or getServerSideProps.

NextJS

console.log(process.env.DATABASE_PASSWORD)
// only works on server side, not in browser

Sample Program

This simple Next.js component shows how to display a public environment variable in the browser. The secret DATABASE_PASSWORD is not shown here and stays safe on the server.

NextJS

import React from 'react'

export default function Home() {
  return (
    <main>
      <h1>API URL:</h1>
      <p>{process.env.NEXT_PUBLIC_API_URL}</p>
    </main>
  )
}

// .env.production file content:
// NEXT_PUBLIC_API_URL=https://api.example.com
// DATABASE_PASSWORD=supersecretpassword

Important Notes

Always restart your Next.js server after changing environment variables.

Never expose secrets by prefixing them with NEXT_PUBLIC_.

Use .env.production for production variables and .env.local for local development.

Summary

Environment variables keep secrets and settings outside your code.

Prefix with NEXT_PUBLIC_ to expose variables to the browser.

Use different files for production and development to keep environments separate.

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