In this project I'm using 3 enviroments:
- development
- staging
- production
I'm using the dependency dotenv-cli
to import the env files with the the scripts at the execution.
For example, for production I'm using: dotenv -e .env.prod next build
.
The first env file is .env.local
.
Here you should store the secrets that will be server side only.
This env file will load in all the enviroments before any other env files.
You can also store public variables (starting with "NEXTPUBLIC") but they will be exposed in client side components.
For development I'm using .env.dev
variable.
You can use the Next.Js default .env.development
with no need to load the env file at the script.
In this example I changed the name just to be shure it works.
Staging is basically the same as Production, but used for testing and QA purposes.
This is the challenging part of multiple env files because Next only considers 3 enviroments (development, production and test).
Like in development it will load .env.local
first followed by .env.staging
(declared with dotenv-cli in the script for staging).
For production, as in development, you can't use .env.production
(Next.Js default env file).
I'm using .env.prod
for this example.
The rest works like in staging.