The right way to Surroundings Variable (.env) in NextJS?

Introduction

When growing initiatives, we use numerous dependencies in our utility. Many instruments use token/API keys to provide endpoints entry, in case of APIs to the licensed consumer. These API keys are helpful and can’t be shared with some other on the web.

We use an surroundings variable to cover the important thing whereas deploying the challenge. The important thing will likely be saved within the server and won’t be obtainable to the shopper.

At the moment, we’re going to find out about utilizing the surroundings variable within the NextJS utility. For those who love dotenv we are going to implement that too.

So let’s get began.

Utilizing subsequent.config.js

NextJS offer you the characteristic of utilizing surroundings variable in your utility. That you must outline your variable in a .env.native file within the root folder.

Create a.env.native file to declare all of your surroundings variables.

.env.native

API_KEY = "<Your API KEY>"

The variable outlined within the .env.native is now obtainable on the server aspect. For those who console.log the API_KEY within the frontend, you will notice undefined within the console of your dev software.

index.js

console.log(course of.env.API_KEY)

To get the surroundings variable obtainable to the frontend we have to config the subsequent.config.js file.

.subsequent.config.js

const nextConfig = {
  env:{
    API_KEY: course of.env.API_KEY
  }
}

Now the API_KEY will likely be obtainable within the frontend and if you happen to console.log, you’re going to get the worth.

Be aware: Restart the server to see the adjustments

Utilizing ‘NEXT_PUBLIC_’

The most recent model of nextJS comes with the characteristic to avail surroundings variables to the frontend with out configuring the subsequent.config.js. You need to prefix the variable in .env.native with NEXT_PUBLIC_

.env.native

NEXT_PUBLIC_PASSWORD = "<Your Password>"

This can load the variable to the frontend with the title NEXT_PUBLIC_PASSWORD. You’ll be able to entry the worth by course of.env.NEXT_PUBLIC_PASSWORD

index.js

console.log(course of.env.NEXT_PUBLIC_PASSWORD)

Utilizing ‘dotenv’ library

For those who use the dotenv library to load the surroundings variable, you may combine it simply in NextJS.

The method follows the same sample as configuring the subsequent.config.js. Set up the library and create the .env file within the root listing. Initialize the variable with the worth as you usually do.

.env

API_KEY = "<Your API KEY>"

Now, now we have to config the subsequent.config.js. First, we have to import the dotenv library.

.subsequent.config.js

require("dotenv").config

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

.subsequent.config.js

const nextConfig = {
  env:{
    API_KEY: course of.env.API_KEY
  }
}

Now, you should have the surroundings variables within the frontend.

Conclusion

You need to use any technique talked about above to load the surroundings variable. I favor loading variables utilizing NEXT_PUBLIC_ as I haven’t got to config subsequent.config.js.

I hope, this text has helped in understanding surroundings variables in NextJS. Thanks for studying the article.