How to use Environment Variable (.env) in NextJS?

Introduction

When developing projects, we use various dependencies in our application. Many tools use token/API keys to give endpoints access, in case of APIs to the authorized user. These API keys are valuable and cannot be shared with any other on the internet.

We use an environment variable to hide the key while deploying the project. The key will be stored in the server and will not be available to the client.

Today, we are going to learn about using the environment variable in the NextJS application. If you love dotenv we will implement that too.

So let's get started.

Using next.config.js

NextJS provide you with the feature of using environment variable in your application. You need to define your variable in a .env.local file in the root folder.

Create a.env.local file to declare all your environment variables.

.env.local

API_KEY = "<Your API KEY>"

The variable defined in the .env.local is now available on the server side. If you console.log the API_KEY in the frontend, you will see undefined in the console of your dev tool.

index.js

console.log(process.env.API_KEY)

To get the environment variable available to the frontend we need to config the next.config.js file.

.next.config.js

const nextConfig = {
  env:{
    API_KEY: process.env.API_KEY
  }
}

Now the API_KEY will be available in the frontend and if you console.log, you will get the value.

Note: Restart the server to see the changes

Using 'NEXT_PUBLIC_'

The latest version of nextJS comes with the feature to avail environment variables to the frontend without configuring the next.config.js. You have to prefix the variable in .env.local with NEXT_PUBLIC_

.env.local

NEXT_PUBLIC_PASSWORD = "<Your Password>"

This will load the variable to the frontend with the name NEXT_PUBLIC_PASSWORD. You can access the value through process.env.NEXT_PUBLIC_PASSWORD

index.js

console.log(process.env.NEXT_PUBLIC_PASSWORD)

Using 'dotenv' library

If you use the dotenv library to load the environment variable, you can integrate it easily in NextJS.

The process follows a similar pattern as configuring the next.config.js. Install the library and create the .env file in the root directory. Initialize the variable with the value as you normally do.

.env

API_KEY = "<Your API KEY>"

Now, we have to config the next.config.js. First, we need to import the dotenv library.

.next.config.js

require("dotenv").config

Now, we have to load the variable to the frontend by adding it to the file.

.next.config.js

const nextConfig = {
  env:{
    API_KEY: process.env.API_KEY
  }
}

Now, you will have the environment variables in the frontend.

Conclusion

You can use any method mentioned above to load the environment variable. I prefer loading variables using NEXT_PUBLIC_ as I don't have to config next.config.js.

I hope, this article has helped in understanding environment variables in NextJS. Thanks for reading the article.