Environment configuration

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Environment configuration: the concepts, APIs, and habits you need before advancing in Next.js.

Without Environment configuration, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply Environment configuration in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When hooks, state, and effects from intermediate lessons are familiar.

Next.js loads environment variables from .env* files. Names prefixed with NEXT_PUBLIC_ are exposed to the browser; everything else stays server-only.

Common files

.env                 # defaults
.env.local           # local overrides (gitignored)
.env.production      # production build

Usage

const dbUrl = process.env.DATABASE_URL; // server only
const apiBase = process.env.NEXT_PUBLIC_API_BASE; // available client-side

Rules

Never prefix secrets with NEXT_PUBLIC_
Access env vars at build time for static optimization where possible
Document required vars in README and deployment dashboard

next.config.js

Configure redirects, image domains, experimental flags, and bundler options—keep secrets out of config files committed to git.

Self-check

Which prefix exposes a variable to the client bundle?
Where should DATABASE_URL live?

Pitfall: Never prefix API keys or DB URLs with NEXT_PUBLIC_—that inlines them into client JavaScript.

Interview prep

NEXT_PUBLIC_ rule?: Only prefix vars safe to expose in the browser bundle; secrets like DATABASE_URL stay unprefixed and server-only.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

NEXT_PUBLIC_ rule?
Secrets in client bundle?

No discussion yet. Be the first to ask a question.