Next.js
/Intermediate
Environment Configuration
Definition
Managing different configurations (API URLs, database connections, secret keys) across multiple deployment environments like Development, Staging, and Production.
Explain Like I'm New
When you hit 'Checkout' on your laptop, it should charge a fake test Credit Card. When a user hits 'Checkout' on the live website, it must charge a real Credit Card. Environment config allows the exact same code to behave differently depending on where it is hosted.
Real World Example
Using a `.env.local` file to hold your personal developer keys, and setting the Production Vercel dashboard to hold the real enterprise keys.
Common Use Cases
- •Security
- •Staging environments
- •API routing
Terminal Output
bash / terminal
/*
Next.js Environment File Hierarchy (Which file wins?)
Next.js looks for files in this exact order. The first one it finds wins.
1. process.env (Actual OS/Vercel variables)
2. .env.$(NODE_ENV).local (.env.production.local or .env.development.local)
3. .env.local (Uncommitted local overrides)
4. .env.$(NODE_ENV) (.env.production or .env.development)
5. .env (The default base file, usually committed to Git with fake/safe values)
*/
Interview Questions
basic
- Should you ever commit your `.env.local` file to GitHub?
intermediate
- What is a 'Staging' environment in the CI/CD lifecycle?