Next.js Environment Variables Not Loading Fix

In this tutorial, you'll learn about Next.js Environment Variables Not Loading Fix. We cover key concepts, practical examples, and best practices.

The Problem

Environment variables defined in .env.local are undefined when accessed via process.env. Next.js requires the NEXT_PUBLIC_ prefix for client-side variables and only loads variables at build time.

Quick Fix

Step 1: Prefix public variables with NEXT_PUBLIC_

# .env.local — Wrong: not exposed to browser
API_URL=https://api.example.com

# Right
NEXT_PUBLIC_API_URL=https://api.example.com

Expected output: process.env.NEXT_PUBLIC_API_URL is available in client components.

Step 2: Access variables with process.env

// Wrong — accessing private var on client
const apiUrl = process.env.API_URL;

// Right — use NEXT_PUBLIC_ prefix
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Expected output: Client-side code can access the public variable.

Step 3: Restart the dev server

# Next.js reads .env files only at server start
# Stop and restart:
npm run dev

Expected output: Environment variables are loaded after restart.

Step 4: Use .env.local for local overrides

Next.js loads files in this priority order (highest first):

1. .env.local
2. .env.development or .env.production
3. .env

# .env — shared defaults
NEXT_PUBLIC_API_URL=https://api.example.com

# .env.local — overrides for local development
NEXT_PUBLIC_API_URL=http://localhost:3000

Expected output: .env.local overrides other env files.

Step 5: Access env in getServerSideProps and API routes

Server-side functions can access all env variables without NEXT_PUBLIC_:

export async function getServerSideProps() {
    // Private variables work here
    const apiKey = process.env.API_KEY;
    return { props: { } };
}

Expected output: Server-side code accesses all environment variables.

Step 6: Check for .env in .gitignore

# .gitignore
.env.local
.env.development.local
.env.production.local

Expected output: Sensitive variables are not committed to version control.

Step 7: Use next.config.js publicRuntimeConfig

module.exports = {
    publicRuntimeConfig: {
        API_URL: process.env.API_URL,
    },
};

Access with import getConfig from 'next/config'.

Prevention

• Use NEXT_PUBLIC_ prefix for all client-side env variables
• Restart dev server after changing .env files
• Keep secrets in .env.local (gitignored)
• Use publicRuntimeConfig for runtime-configurable values

Common Mistakes with env not loading

1. Overlapping type class instances that cause GHC to reject the program with ambiguous dispatch errors
2. Non-exhaustive pattern matches that compile with warnings then crash at runtime
3. Misunderstanding that String is [Char] with poor performance for large text operations

These mistakes appear frequently in real-world NEXTJS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ