DEV Community


Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

// .gitignore
Enter fullscreen mode Exit fullscreen mode

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 () => {

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

  return {
    props: {
Enter fullscreen mode Exit fullscreen mode

5.Add your environment variables in Vercel deployment.

Alt Text

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.

Buy Me 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.

Top comments (12)

kunalgulati_72 profile image

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

elaineleung profile image

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:

ayomiku222 profile image
ayomiku olatunji

This solved my problem. Thanks Elaine

Thread Thread
elaineleung profile image

Good to hear!

vaibhavkhulbe profile image
Vaibhav Khulbe

Looks so easy! Thanks for writing. πŸ˜€

hulyakarakaya profile image

Thanks πŸ™ŒπŸΌ

gedeonnzemba profile image
Gedeon Nzemba

Thank you so much.

it has worked for me

andrewbaisden profile image
Andrew Baisden

Short and simple thanks for sharing.

hulyakarakaya profile image

Thank you @andrewbaisden

primelos profile image
carlos fabian venegas

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

kirtirajsinh profile image

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?

isaachatilima profile image
Isaac Hatilima

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