Cool way to use staging and production environment with Next.js
Tags: nextjs, react, dotenv, staging
Published: 2021-03-27 05:33:45

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](https://github.com/vercel/next.js/issues/12772#issuecomment-627296165)). 

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

{% gist https://gist.github.com/martiuh/17b44fa4bfe61e18b277a899308c541b %} 


After creating that one, I chosen to create a custom step for the app called `boot`

```json
{
  "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`](https://www.npmjs.com/package/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`](https://www.npmjs.com/package/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!