.env.local Jun 2026
: Ensure your secrets stay local by adding the filename to your Git ignore Load in Code require('dotenv').config( path: '.env.local' ) Frontend Frameworks : Frameworks like load these automatically. Access them via process.env.VARIABLE_NAME import.meta.env.VITE_NAME
Next.js loads .env.local automatically. You can access variables natively: javascript const apiKey = process.env.API_SECRET_KEY; Use code with caution.
require('dotenv').config( path: '.env' ); require('dotenv').config( path: '.env.local', override: true ); .env.local
By default, frameworks protect your environment variables by making them accessible only on the server environment. If you try to log process.env.API_SECRET_KEY in a browser-rendered React component, it will return undefined .
The .env.local file is a plain text file used to store environment-specific variables that are meant only for your local development environment. It is widely supported by modern frameworks (like Next.js, Create React App, Vite, and Vue) and node-based applications. : Ensure your secrets stay local by adding
Understanding .env.local: The Definitive Guide to Local Environment Variables
There's sometimes confusion about which file should be committed. The general consensus across frameworks is: require('dotenv')
To truly understand .env.local , you need to understand the entire ecosystem of environment files. Modern frameworks like Next.js support multiple file types, each serving a distinct purpose:
If you are trying to access a variable in the browser, it must have the framework's public prefix ( NEXT_PUBLIC_ , VITE_ , REACT_APP_ ). Variables in .env.local without these prefixes are only available on the server/Node side.
Hardcoding secrets like AWS tokens or Stripe API keys into your code repository puts you at risk of accidental exposure. If your repository is public—or even if a private repository is breached—your secrets are compromised. .env.local is kept strictly on your machine, ensuring secrets stay safe. 2. Individual Customization
