How to Set Environment Variables in Next.js

Hello friends, today I was trying to use environment variables inside a Next.js project, and it is really easy to work with.

First of all, you don't need to download dotenv package anymore.

Steps to work with Environment Variables

1. Create a .env.local file inside the root of your project.

2. Put your private keys inside the file in this format:

// .env.local
API_KEY="...."

3.Save the file and add it to the .gitignore file.

// .gitignore
.env*.local

4.Access your keys with process.env. You can access your environment variables inside the pages directory or while you are fetching data with the getServerSideProps function.

export const getServerSideProps = async () => {
  console.log(process.env.API_KEY);

  const res = await fetch(`${server}/api/?key=${process.env.API_KEY}`)
  const articles = await res.json()

  return {
    props: {
      articles,
    },
  }
}

5.Add your environment variables in Vercel deployment.

You can store your environment variables on Vercel, shown in the picture.

Wrapping Up

I hope you will not have any trouble storing your environment variables in your Next.js projects. Whenever I try to use environment variables, something goes wrong; but Next.js worked perfectly.

If you like this post, share it on your Twitter account to support me writing more, also you can support me by buying a coffee.

You can follow me on Twitter, and Github. We can connect with each other. Also, you can check out my other posts. I have shared resources that can help you learn Next.js.