How to use Environment Variable (.env) in NextJS?
Tags: nextjs, javascript, webdev, beginners
Published: 2022-08-12 05:10:00

## 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`**
```javascript
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`**
```javascript
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`**
```javascript

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`**
```javascript
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`**
```javascript
console.log(process.env.NEXT_PUBLIC_PASSWORD)
```

## Using 'dotenv' library

If you use the [dotenv](https://www.npmjs.com/package/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`**
```javascript
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`**
```javascript
require("dotenv").config
```

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

#### **`.next.config.js`**
```javascript

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.