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

Create…


This content originally appeared on DEV Community and was authored by Hulya

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.

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.

hulyakarakaya image

Learn Next.js For Free with These Resources

Hulya ・ Mar 29 ・ 5 min read

#webdev #nextjs #react #javascript


This content originally appeared on DEV Community and was authored by Hulya


Print Share Comment Cite Upload Translate Updates
APA

Hulya | Sciencx (2021-04-10T02:12:43+00:00) How to Set Environment Variables in Next.js. Retrieved from https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/

MLA
" » How to Set Environment Variables in Next.js." Hulya | Sciencx - Saturday April 10, 2021, https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/
HARVARD
Hulya | Sciencx Saturday April 10, 2021 » How to Set Environment Variables in Next.js., viewed ,<https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/>
VANCOUVER
Hulya | Sciencx - » How to Set Environment Variables in Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/
CHICAGO
" » How to Set Environment Variables in Next.js." Hulya | Sciencx - Accessed . https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/
IEEE
" » How to Set Environment Variables in Next.js." Hulya | Sciencx [Online]. Available: https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/. [Accessed: ]
rf:citation
» How to Set Environment Variables in Next.js | Hulya | Sciencx | https://www.scien.cx/2021/04/10/how-to-set-environment-variables-in-next-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts