My environment variables aren’t working 😱😱😱
You might be in this situation, you want to use a .env file to hide API URL or secret key during development in your NextJS app. Let’s see how we can set things up correctly.

How do I use environment variables in Next.js?

Simple! In the root of your Next.js application create a .env file. Inside this file, declare all environment variables you need like this:

STRIPE_KEY = "*************"
API_KEY = "<Your API KEY>"

Then, in your code you can reference these variables

Using next.config.js

NextJS provides you with the feature of using environment variables 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.

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.

console.log(process.env.API_KEY)

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

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_

NEXT_PUBLIC_JWT_SECRET = "<Your secret>"

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

console.log(process.env.NEXT_PUBLIC_JWT_SECRET)

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.

API_KEY = "<Your API KEY>"

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

require("dotenv").config

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

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. Thanks for reading the article.