Cool way to use staging and production environment with Next.js

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!