.env.development.local ✭ < EASY >
(via .env.schema.json )
They then edit .env.development.local with their actual local values.
According to Vercel's official documentation, in a Next.js project, variables from .env.development.local are loaded with the highest priority during development, overriding values from .env.local , .env.development , and .env . .env.development.local
.env.development.local is a dotenv-style environment file commonly used in JavaScript/Node and frontend projects (Create React App, Vite, Next.js, etc.) to store development-only environment variables that should override other development settings on a single machine. It fits into a conventional dotenv hierarchy where different files target different environments and scopes (e.g., .env, .env.development, .env.production, .env.local).
Why not just use a standard .env file? Here are three reasons why .env.development.local is a lifesaver: It fits into a conventional dotenv hierarchy where
( .vscode/validate-env.js )
flowchart TD Start([Application Starts in Development Mode]) --> LoadBase[Load .env [Base Config]] LoadBase --> LoadEnvDevDoes .env.development exist? LoadEnvDev -- Yes --> LoadDev[Load .env.development values<br>Override .env if conflict] LoadEnvDev -- No --> LoadEnvLocal LoadEnvDev -- Yes --> LoadDev[Load
Development teams are rarely homogeneous. Some developers may use Docker for local services, while others run databases natively. Some might need to test against a staging API, while others use local mocks. .env.development.local allows each developer to tailor their environment precisely to their needs without forcing those changes on others.
When you initialize a project, you should ensure your .gitignore file includes the following lines: