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.

Article No Longer Available

Comments

[Kunal]

Such is so simple!!! Love it !!

I have a question. Is the key "process.env.API_KEY" accessible to Client (user) ?
If not, how does nextJS allows the code on client-side to insert this value in fetch requests made from client side?

The documentation states "In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time".
In context of security, I am trying to understand how does NextJS make it work
nextjs.org/docs/basic-features/env...

[Elaine]

Not sure whether you found the answer to your question yet, but in any case, for the client side you would need to add a "NEXT_PUBLIC_" prefix to the variable. So for "API_KEY", you'd have to change it to NEXT_PUBLIC_API_KEY in the .env file, which also means it would be process.env.NEXT_PUBLIC_API_KEY when used. More on this here: nextjs.org/docs/basic-features/env...

[Ayomiku Olatunji John]

This solved my problem. Thanks Elaine

[Elaine]

Good to hear!

[Vaibhav Khulbe]

Looks so easy! Thanks for writing. 😀

[Hulya]

Thanks 🙌🏼

[Gedeon Nzemba]

Thank you so much.

it has worked for me

[Andrew Baisden]

Short and simple thanks for sharing.

[Hulya]

Thank you @andrewbaisden

[carlos fabian venegas]

Whats the difference with using API_KEY vs NEXT_PUBLIC_API_KEY for variable name?

[kirtirajsinh]

When I try to use the process.env.API_KEY in the api folder in Nextjs It doesn't work giving error : 401 message: API key not formatted properly. Can you help how do I resolve it?

[Isaac Hatilima]

How do I escape a value like Password123$$? it is giving a warning about splitting