Akhila Ariyachandra


Environment Variables in Next.js

March 06, 2020

2 min read

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

Since Next.js uses Webpack we can use the 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.

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.

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

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

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.

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.

// 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 Zeit NOW

If you are using a Git provider like Github to deploy the Application in Now, 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.

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

Instead of the .env file we will use the secrets available in Now.

Once you have downloaded, installed and logged into the Now CLI, use the following template to add a new secret.

now secrets add <secret-name> <secret-value>

In our example, we can add the AUTHSECRET_ like this.

now secrets add now-auth-secret verysecret

Next we need to tell Now to map the now-auth-secret to the AUTHSECRET_ environment variable. This done through the Now config file, now.json. To be make sure the secret is ued properly in both build time and runtime, set both the env and build properties in the now.json file.

{
  "version": 2,
  "env": {
    "AUTH_SECRET": "@now-auth-secret"
  },
  "build": {
    "env": {
      "AUTH_SECRET": "@now-auth-secret"
    }
  }
}

Wrapping up

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



Written by Akhila Ariyachandra , Web Developer with a passion for JavaScript and React