Environment Variables in Next.js

Akhila Ariyachandra - Mar 6 '20 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

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

    return config;
  }
};
Enter fullscreen mode Exit fullscreen mode

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;
  }
};
Enter fullscreen mode Exit fullscreen mode

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;
  }
};
Enter fullscreen mode Exit fullscreen mode

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

AUTH_SECRET=verysecret
Enter fullscreen mode Exit fullscreen mode

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 }));
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

now env add
Enter fullscreen mode Exit fullscreen mode

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,
  },
};
Enter fullscreen mode Exit fullscreen mode

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! 😊

. . . . . . . . . . . . . . . . . . . . .