2.8K Views

NEXT110 - Environment Variables

Learn how to use environment variables in Next.js, understand public vs private variables, and manage configuration securely for development and production environments.

Environment variables are essential for managing configuration and secrets in real-world applications.
In this lesson, you will learn how Next.js handles environment variables and how to use them safely.

What Are Environment Variables?

Environment variables are key-value pairs used to store configuration outside of the source code.

Common use cases:

  • API keys
  • Database URLs
  • Feature flags
  • Environment-specific settings

They help keep sensitive data out of version control.

Environment Files in Next.js

Next.js supports multiple environment files:

  • .env.local
  • .env.development
  • .env.production

The most common file is .env.local.

Example:

API_URL=https://api.example.com
SECRET_KEY=supersecret

The .env.local file should never be committed to Git.

Accessing Environment Variables

Environment variables are accessed using process.env.

const apiUrl = process.env.API_URL;

Variables are replaced at build time.

Public vs Private Variables

Next.js distinguishes between public and private variables.

Private Variables

  • Available only on the server
  • Used for secrets

Example:

DATABASE_URL=mysql://user:pass@localhost:3306/db

Public Variables

  • Exposed to the browser
  • Must start with NEXTPUBLIC

Example:

NEXT_PUBLIC_SITE_NAME=MyWebsite
const siteName = process.env.NEXT_PUBLIC_SITE_NAME;

Never expose secrets using public variables.

Using Variables in Server Components

Server Components can safely access private variables.

const dbUrl = process.env.DATABASE_URL;

This code never runs in the browser.

Using Variables in Client Components

Client Components can only access NEXTPUBLIC variables.

"use client";
 
const siteName = process.env.NEXT_PUBLIC_SITE_NAME;

Attempting to access private variables in client components will fail.

Environment Variables in Production

In production environments:

  • Variables are set via hosting platform
  • .env files are usually not deployed
  • Secrets are managed through dashboards

Platforms like Vercel provide UI for managing environment variables.

Common Mistakes

Avoid these mistakes:

  • Committing .env.local to Git
  • Exposing secrets with NEXTPUBLIC
  • Forgetting to restart the dev server
  • Assuming variables update automatically

Environment changes require a server restart.

Best Practices

Recommended practices:

  • Use .env.local for local development
  • Prefix public variables correctly
  • Keep secrets server-only
  • Document required environment variables

Good configuration management improves security and stability.

Summary

In this lesson, you learned:

  • What environment variables are
  • How Next.js handles env files
  • Public vs private variables
  • Using variables in server and client components
  • Production environment management
  • Common mistakes and best practices

In the next lesson, we will explore API Routes in Next.js and learn how to build backend logic inside a Next.js application.