Friday, August 12, 2022
HomeWordPress DevelopmentThe right way to Surroundings Variable (.env) in NextJS?

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

Exit fullscreen mode

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

Exit fullscreen mode

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

Exit fullscreen mode

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

Exit fullscreen mode

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

Exit fullscreen mode



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

Exit fullscreen mode

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



.subsequent.config.js

require("dotenv").config
Enter fullscreen mode

Exit fullscreen mode

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

Exit fullscreen mode

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments