Updated my original blog post on 18th May, 2020 to reflect the how Next.js v9.4+ 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 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 Vercel

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.

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

Instead of the .env file we will use the Environment Variables UI available in Vercel.

To start, install, log into the Vercel CLI and link it to a project if you haven't already.

npm i -g now
now login
now

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

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.

// 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.

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