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.