Environment variables in production in NextJS - Performance & Optimization

Performance: Environment variables in production

MEDIUM IMPACT

This affects page load speed and security by controlling what data is exposed to the client and how the server handles configuration.

Managing environment variables for production builds in Next.js

NextJS

module.exports = {
  env: {
    NEXT_PUBLIC_API_KEY: process.env.NEXT_PUBLIC_API_KEY
  }
};
// Keep SECRET_KEY only on server side and access via server code

Only exposes public variables prefixed with NEXT_PUBLIC_ to client, keeping sensitive data server-side and reducing bundle size.

📈 Performance GainSaves kilobytes in client bundle and improves LCP by reducing JS parsing time.

Managing environment variables for production builds in Next.js

NextJS

module.exports = {
  env: {
    NEXT_PUBLIC_API_KEY: process.env.NEXT_PUBLIC_API_KEY,
    NEXT_PUBLIC_SECRET_KEY: process.env.NEXT_PUBLIC_SECRET_KEY
  }
};

Exposes sensitive variables like NEXT_PUBLIC_SECRET_KEY to the client bundle, increasing bundle size and security risk.

📉 Performance CostAdds unnecessary kilobytes to client bundle and increases LCP due to larger JS parsing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Exposing all env vars to client	N/A	0	Increased due to larger JS bundle	[X] Bad
Exposing only NEXT_PUBLIC_ vars	N/A	0	Minimal paint cost, smaller JS bundle	[OK] Good

Rendering Pipeline

Environment variables used in Next.js affect the JavaScript bundle size sent to the browser and server runtime configuration. Variables exposed to the client are embedded in the bundle during build time, impacting download and parse stages.

→Network

→JavaScript Parsing

→Execution

⚠️ BottleneckJavaScript Parsing and Execution due to larger bundle size from exposed variables

Core Web Vital Affected

LCP

This affects page load speed and security by controlling what data is exposed to the client and how the server handles configuration.

Optimization Tips

1Only prefix environment variables with NEXT_PUBLIC_ if they must be exposed to the client.

2Keep sensitive environment variables server-side to reduce bundle size and improve security.

3Check your JavaScript bundle size in DevTools Network tab to ensure environment variables are optimized.

Performance Quiz - 3 Questions

What is the main performance risk of exposing all environment variables to the client in Next.js?

A More DOM nodes created

B Slower server response time

C Increased JavaScript bundle size slowing page load

D Higher CSS paint cost

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and inspect the main JavaScript bundle size.

What to look for: Look for unusually large JS files indicating too many environment variables exposed to client.

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