Environment Variables in Next.js
Tags: react, javascript, nextjs
Published: 2020-03-06 03:50:24

> # **Updated my [original blog post](https://akhilaariyachandra.com/environment-variables-in-next-js "Environment Variables in Next.js") on 18th May, 2020 to reflect the how [Next.js v9.4+](https://nextjs.org/blog/next-9-4#new-environment-variables-support "New Environment Variables Support") handles the .env file.**

Often we need to use certain variables like the database path or authentication secrets without committing them to the repo.

Since [Next.js](https://nextjs.org/ "Next.js") uses [Webpack](https://webpack.js.org/ "Webpack") we can use the [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) dependency to load variable from a *.env* file to our Next.js application.

Let's start by installing dotenv-webpack as a dev dependency.

```shell
npm install dotenv-webpack -D
```

Next we need to modify the Webpack configuration in Next.js. This is done through the *next.config.js* file.

First import the dotenv-file dependency.

```javascript
const Dotenv = require("dotenv-webpack");
```

Next export the config object with the default Webpack config function.

```javascript
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

    return config;
  }
};
```

All we need to do now is add the dotenv-plugin into the Webpack plugins array.

```javascript
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add the new plugin to the existing webpack plugins
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  }
};
```

Finally the *next.config.js* should look like this.

```javascript
// next.config.js
const Dotenv = require("dotenv-webpack");

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add the new plugin to the existing webpack plugins
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  }
};
```

Now you can use environment variables in the application. For example, if your *.env* file is like this,

```
AUTH_SECRET=verysecret
```

You can use the variable like this, `process.env.AUTH_SECRET`.

**Never commit the *.env* file. Add it to the *.gitignore* file.**

## Deploying to [Vercel](https://vercel.com/home)

If you are using a Git provider like Github to deploy the Application in Vercel, you can't use _.env_ file. This is the reason we set the _silent_ property when adding dotenv-webpack plugin, to prevent any errors because of the missing _.env_ file.

```javascript
config.plugins.push(new Dotenv({ silent: true }));
```

Instead of the _.env_ file we will use the [Environment Variables UI](https://vercel.com/blog/environment-variables-ui) available in Vercel.

To start, install, log into the [Vercel CLI](https://vercel.com/download) and link it to a project if you haven't already.

```shell
npm i -g now
now login
now
```

Then use the following command to set the Environment Variables in the deployment environment.

```shell
now env add
```

Finally to make the variables available in the client side code, we need to add one more property to the Next.js config. Add a new property called `env` and list all the environment variables you want in the client side code as follows.

```javascript
// next.config.js
const Dotenv = require("dotenv-webpack");

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add the new plugin to the existing webpack plugins
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  },
  // Have to list all the environment variables used here to make it available
  // to the client side code
  env: {
    AUTH_SECRET: process.env.AUTH_SECRET,
  },
};
```

_This feels like a really hacky workaround to me, so if you have any suggestions on how to improve it please let me know in the comments below._

## Wrapping up

You can find an example of the implementation [here](https://github.com/akhila-ariyachandra/next-env-test).

I hope you found this guide helpful. Please be sure to share it and leave a comment below! 😊