Blogs

Tools

Quick Links

Mridul.tech

How to use Next js Environment Variables

Mridul Panda

Mridul Panda

Feb 24, 2023

·

3 Min Read

How to use Next js Environment Variables
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

You may also like

How to add Styled components in Next.js App router

How to add Styled components in Next.js App router

May 11, 2024

·

4 Min Read

Styled components have become a popular choice for styling React applications due to their simplicity and flexibility. When it comes to integrating styled components into a Next.js application, it’s essential to understand how to leverage them effectively within the app router. In this guide, we’ll explore step-by-step how to add styled components to a Next.js […]

Read More

How to add Google Web Stories in Next JS

How to add Google Web Stories in Next JS

Dec 14, 2023

·

10 Min Read

In the fast-paced digital world, user engagement is key to the success of any website. One effective way to captivate your audience is by incorporating Google Web Stories into your Next JS website. These visually appealing and interactive stories can make your content more engaging and shareable. In this comprehensive guide, we’ll walk you through […]

Read More

How to send Emails in Next JS for Free using Resend

How to send Emails in Next JS for Free using Resend

Nov 10, 2023

·

7 Min Read

Sending emails in web applications is a crucial feature, and in this article, we will explore how to send Emails in Next JS for free using Resend. Next JS is a popular framework for building React applications, and Resend is a handy tool for email integration. By the end of this guide, you’ll have the […]

Read More

How to add Google Login in Next.js with Appwrite

How to add Google Login in Next.js with Appwrite

Nov 01, 2023

·

7 Min Read

Are you looking to enhance user authentication in your Next.js application? Integrating Social Login with Appwrite can be a game-changer. Add Google Login to your Next.js app with Appwrite. This article will guide you through the process, and practical tips to add Google Login in Next.js with Appwrite. GitHub Code: Google Login in Next.js with […]

Read More

How to add Protected Routes in Next JS

How to add Protected Routes in Next JS

Oct 28, 2023

·

5 Min Read

In the world of web development, security is paramount. Whether you are building a simple blog or a complex web application, protecting certain routes and pages from unauthorized access is a crucial step. In this comprehensive guide, we will walk you through the process of adding protected routes in Next JS, ensuring that your web […]

Read More

How to run localhost 3000 on https in Next JS

How to run localhost 3000 on https in Next JS

Oct 20, 2023

·

2 Min Read

In the ever-evolving world of web development, having a secure local development environment is crucial. If you’re working with Next.js and need to run localhost on HTTPS with port 3000, you’re in the right place. In this comprehensive guide, we will walk you through the process step by step, ensuring you have a secure and […]

Read More

Do you want more articles on React, Next.js, Tailwind CSS, and JavaScript?

Subscribe to my newsletter to receive articles straight in your inbox.

If you like my work and want to support me, consider buying me a coffee.

Buy Me A Coffee

Contact Me ☎️

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : contact@mridul.tech

Connect with me on Social Media

Contact Art