diff --git a/README.md b/README.md index d00d37e..34d3dfe 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1400 TILs and counting..._ +_1401 TILs and counting..._ --- @@ -624,6 +624,7 @@ _1400 TILs and counting..._ - [Fetch Does Not Work In API Serverless Function](nextjs/fetch-does-not-work-in-api-serverless-function.md) - [Make Environment Variable Publicly Available](nextjs/make-environment-variable-publicly-available.md) - [Match Middleware On Groups Of Paths](nextjs/match-middleware-on-groups-of-paths.md) +- [Precedence Of Dot Env Files](nextjs/precedence-of-dot-env-files.md) - [Push A Route With A URL Object](nextjs/push-a-route-with-a-url-object.md) - [Redirect An Unauthorized User](nextjs/redirect-an-unauthorized-user.md) - [Remove A Query Param From The URL](nextjs/remove-a-query-param-from-the-url.md) diff --git a/nextjs/precedence-of-dot-env-files.md b/nextjs/precedence-of-dot-env-files.md new file mode 100644 index 0000000..dbfbea8 --- /dev/null +++ b/nextjs/precedence-of-dot-env-files.md @@ -0,0 +1,41 @@ +# Precedence Of Dot Env Files + +_Dot Env_ files like `.env`, `.env.development`, `.env.local`, etc. are one of +the main ways to configure your Next.js app across various environments. + +It's not uncommon to see several different `.env*` files in production app that +is under active development. + +Here is an example of almost every variant in play: + +```bash +$ ls -a -1 .env* +.env +.env.development +.env.development.local +.env.development.local.example +.env.local +.env.production +.env.test +``` + +So, how does Next.js decide which files to load and in what order? + +It will always attempt to load `.env` and `.env.local` (except in `test`) if +those exist. It will also look for environment-specific files based on the +`NODE_ENV` (which can be one of `development`, `test`, or `production`). So, in +`development`, the `.env.development` and `.env.development.local` will be +loaded. Something like `.env.development.local.example` isn't on the list, but +rather is a convention for a dotenv file's template. + +As for the order, the environment itself (your system's environment variables) +which are present in `process.env` take the highest precedence. After that, it +looks in any of the follow present files in this order, stopping once it finds +what it is looking for: + +- `.env.$(NODE_ENV).local` +- `.env.local` +- `.env.$(NODE_ENV)` +- `.env` + +[source](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#environment-variable-load-order)