Add Precedence Of Dot Env Files as a Next.js TIL

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)

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)