At work we've been using Next.js to develop a new app and so far we've been using only the staging or quality assurance environment, but as time passes the time to deploy this app to production is getting closer.
The task
I had to setup our Next.js app to make it work in multiple environments and load the env variables accordingly, the environments were development, staging and production. After some thought and reading how Next handles the .env
files I was sad when I realized that the .env.staging
file was not supported (and probably won't be supported in a long time).
I knew I had to keep using Next's cool implementation for .env
files, like allowing me to expand variables, and keep some environment variables out of the client side and I didn't want to copy how they do it, because that'd imply adding more code to the project and also not taking advantage of a cool feature of a framework, fortunately I came with a solution.
The solution
Instead of having a .env.production
file, I thought that at install time I'll generate the appropriate .env.production
file based on a environment variable, I knew that we were using the TARGET_ENV
variable to separte the staging and production deployments so if I read that value I can use our good friend node
to create the file.
This is the script that I created
After creating that one, I chosen to create a custom step for the app called boot
{
"scripts": {
"boot": "npm install && node copyEnvFile.js",
"copy:env": "node copyEnvFile.js"
}
}
And that's it you are handling different environments using Next.js native dotenv file management.
Some troubles I faced
Before coming up with the full solution above I faced some problems
Consider the write permits of the user running npm
I thought that the best place to do the copy envfile test was inside the next build
step, but because of some problems inside the deploying container I was not create files because of ownership permissions.
Using any of the pre
or pos
install hook.
In order to run any of the mentioned hooks, npm needs to be spawn by the owner of the files and because there were some unkwown discrepancies I had an error that wouldn't run any of these hooks inside my particular container.
Other alternatives
Using env-cmd
Checkout the
env-cmd
package
With that package you can load a specific .env
file based on some variables but I chose not to use it because I'd be loosing cool Next.js features
Using if-env
Checkout the
if-env
package
It's really useful for running certain scripts based on the environment variables but again it's not a good solution because you won't be able to use some Next.js features
Thank you for reading
This is my first dev.to article and I hope you find value in it. See ya!
Top comments (0)