"scripts": "dev": "next dev", // Uses .env.development "build:staging": "APP_ENV=staging next build", // Use custom env check "build:prod": "next build" // Uses .env.production
const dbConfig = host: process.env.DB_HOST_DEV, port: process.env.DB_PORT_DEV, user: process.env.DB_USERNAME_DEV, password: process.env.DB_PASSWORD_DEV, ;
To prevent compiler parsing bugs or application crashes, your .env.development variables should strictly follow these formatting conventions:
commit your .env files to version control (like GitHub). Open your .gitignore file. Add .env* to the list. .env.development
.env.local is not loaded during testing to ensure test isolation and reproducibility.
NEXT_PUBLIC_API_URL=http://localhost:3000/api NEXT_PUBLIC_APP_NAME=MyApp (Dev)
# .env.development # Server-only (never exposed to client) DATABASE_URL=postgresql://localhost:5432/myapp_dev API_SECRET=dev-secret-key "scripts": "dev": "next dev", // Uses
An application behaves differently depending on where it runs. For example:
The .env.development file is a specialized environment configuration file used primarily to store variables specific to a developer's local or shared development environment. Unlike a general .env file, which might serve as a global default, .env.development is often automatically prioritized by modern frameworks (like Vite or Create React App) when the application is running in "development mode".
API_BASE_URL=http://localhost:5000/api DB_CONNECTION_STRING=mongodb://localhost:27017/my_dev_db # Mock/Test Credentials Unlike a general
# .env.development VITE_APP_NAME=MyVueApp Dev VITE_API_BASE=http://localhost:8080/api VITE_LOG_LEVEL=debug VITE_FEATURE_FLAG_NEW_DASHBOARD=true
The Twelve-Factor App methodology, a widely adopted approach for building modern, scalable applications, emphasizes storing configuration in the environment. This principle separates configuration from code, allowing applications to behave differently across development, testing, staging, and production environments without code changes. The .env.development file is a direct implementation of this principle, providing a dedicated space for configuration variables that should only apply when your application is running in a development context.
// Example in React/Node const apiUrl = process.env.REACT_APP_API_URL; console.log(apiUrl); // Outputs: http://localhost:5000/api Use code with caution.
Vue CLI projects support environment files with variables prefixed by VUE_APP_ .