Keep your secret environment variables hidden in Next.js

Building projects with Next.js is very easy and satisfying as a React.js developer, but it might be tricky to understand how to use ENV vars and keep them safely hidden.

How to store your environment variables 🤷‍♂️ 🤷‍♀️

Next.js has already done the job for you and will automatically load your env variables from .env.local . You will be able to access these variables by using process.env.MY_VAR_NAME

> yarn create next-app amazing-app // create a new app
> cd amazing-app
> touch .env.local // create a .env.local file

Here is what you should have in your favorite editor with two env. vars that I have added NEXT_PUBLIC_API_KEY , and SECRET_API_KEY .

🚨 🚨 These two variables are actually very different in Next.js 🚨 🚨

NEXT_PUBLIC_API_KEY starts by the magic keyword NEXT_PUBLIC_ which means that this env. var is not secret and can be used publicly.

On the other side, SECRET_API_KEY does not start by NEXT_PUBLIC_ and will not be accessible publicly.

Let’s see how to manage this public / private difference below.

How to use public env. vars 🌞

Let’s continue with our previous example and we will try to show our NEXT_PUBLIC_API_KEY in the browser.

Go to pages/index.js and try to render this variable in the frontend with process.env.NEXT_PUBLIC_API_KEY

Defining the var line 6 and rendering it line 17.

And that’s all for the public env vars, it is very easy to use them, just remember to add the magic keyword NEXT_PUBLIC_ in your var name.

How to use private env. vars 🌝

What happens if we try to show our private SECRET_API_KEY var in the browser ?

Private var. defined line 7, used line 22.

As you can see, our private variable is not showing because we didn’t use the NEXT_PUBLIC_ naming convention.

Fetching external data with my private variable 🛸

As the Next.js documentation says, you will be able to use your private env. variables in Next.js data fetching methods and API routes.

Either by using the getStaticProps function or under the pages/api folder as we did for the public ones by using process.env

To fetch data under the pages/api folder you have to :

• Create a Serverless function under the pages/api/myFunction.js folder to fetch the data. Check this article if you are new to Serverless functions.
• Inside your component, you can fetch myFunction

// fetching myFunction inside a component and sending customParameter to it
const getData = async (customParameter) => {
  const res = await fetch('/api/myFunction', {
    method: 'post',
    headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    customParameter: customParameter
  })});
  const response = await res.json();
}

That’s all for this article, I hope that you learned something and that it will help you to understand better how env. variables are working in Next.js.

Feel free to give your feedbacks in the comments, I would love to improve the quality of the content if I can 😄

🙋‍♂️ 🙋‍♀️ I’am also the maker of stanza.dev that helps developers to learn coding concepts faster. Feel free to have a look 👨‍💻 👩‍💻

Cheers ✌️

Other stories I’ve written ✍️

What I didn’t know about Ruby Numbers

What I didn’t know about Ruby Classes

What I didn’t know about MIME types