Next.js has the most sophisticated environment variable handling. It supports multiple files out-of-the-box.
Load Order (Highest to Lowest Priority):
Key Rules in Next.js:
Example .env.local for Next.js:
# Only accessible on the server (Node.js)
DATABASE_URL="postgresql://user:pass@localhost:5432/mydb"
STRIPE_SECRET_KEY="sk_test_..."
Never commit .env.local, but always commit an .env.example file. This acts as documentation for your team. .env.local
# .env.example
DATABASE_URL=postgresql://username:password@localhost:5432/dbname
API_KEY=your_api_key_here
Developers copy this file to .env.local and fill in their actual values.
Because .env.local is never stored in the build artifact or deployment container, it reduces the risk of secret leakage through: Key Rules in Next
To understand where .env.local fits, it helps to look at the hierarchy. Most frameworks load these files in a specific order of precedence (later files overriding earlier ones):
.env.local usually sits near the top of the priority chain. If you define API_URL in .env and a different value in .env.local, the application will use the value from .env.local. This allows developers to override defaults without altering the shared code. Example
.env.local > .env.[mode] > .env
Example in Next.js/Vite/CRA: