How to use Next js Environment Variables

We use a variety of services in our application while constructing projects. In the case of APIs, several technologies employ tokens or API keys to grant authorised users access to endpoints. These API keys are confidential and cannot be disclosed to anybody online. While deploying the code, we hide the key using an environment variable. The client won’t have access to the key because it will be kept on the server. In this article, we will learn how to use Next js Environment Variables.

Part 1 – How to use Next js Environment Variables

Part 2 – How to Deploy Next JS with Environment Variables

Environment Variables Using next.config.js

Environment variables are supported by Next.js natively with which you can use API keys without making them public.

For this create a file named .env.local in the root directory and now you can add your API keys or secret tokens and can access them in your app.

// .env.local
API_URL=https://api.test.com
API_KEY=xxxxxxxxxx

Now on the server side, the variable that we added in the .env.local file, is now accessible server side. But If you console.log the API_URL or API_KEY in the front end, your dev tool’s console will show undefined. For this, we have to add our environment variables in next.config.js and then we can access them in our app.

// next.config.js
module.exports = {
  env: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  },
};

Now restart your server. This is important. After restarting you will see the environment variables in your console. And you can use the API_URL and API_KEY to fetch data.

Also Read: How to Generate ZIP with File Links in Next JS and React JS

Environment Variables Using NEXT_PUBLIC

In the latest version of Next JS, we can add Environment Variable without even adding them in the next.config.js. We just need to add NEXT_PUBLIC_ in front of the env variable name. And then we can access them on the client side also.

// .env.local
NEXT_PUBLIC_API_URL=https://api.test.com
NEXT_PUBLIC_API_KEY=xxxxxxxxxx

Now we can access them with process.env.NEXT_PUBLIC_API_URL and NEXT_PUBLIC_API_KEY in our app

Also Read: How to Add Google Analytics in NextJS

Environment Variables using dotenv package

You can also access the env variables with dotenv package. For this method, we have to rename the env file name to .env only. For this install the package with npm i dotenv command. Now we can add our env variables in .env file.

// .env.local
API_URL=https://api.test.com
API_KEY=xxxxxxxxxx

But in this method, we have to add the variable names in the next.config.js file.

// next.config.js
require('dotenv').config();

module.exports = {
  env: {
    API_URL: process.env.API_URL,
    API_KEY: process.env.API_KEY,
  },
};

Also Read: How to use both Tailwind and Styled Components in Next JS

Conclusion

To load the environment variable, you can use any of the methods mentioned. Personally, I prefer using NEXT_PUBLIC_ as I don’t have to configure them in the next.config.js file.

Also Read: How to use GitHub GraphQL API in React or Next JS