How to Use Environment Variables in Next.js

Next.js — the name is not new to any developer who has been working with React. It made the development of SPAs easy by having multiple routes. It also helped in SEO due to its server-side rendering method.

Next.js offers many features to us as developers by doing the heavy lifting under the hood. Among many features that are offered to us by Next.js, one of my personal favorites is the in-built support for environment variables.

Environment variables are a great way to store sensitive information about your app. API keys and database passwords are the most stored values as environment variables, but you can store anything.

These variables are accessible to the whole application, and they are never exposed to the browser and are only stored on the server. That’s what makes environment variables so special.

We do not have to depend on some external package to use environment variables in our project since Next.js gives us in-built support.

To use environment variables in your Next.js project, create a file named .env.local in the root of your project directory. We can store all the sensitive values related to our application in this file.

Variables inside the .env.local:

// inside '.env.local' file
NAME=test123

Here, we have a variable called “NAME” whose value is ‘test123’. As you can see, ‘test123’ is a string but we are not storing it inside single or double quotes.

All the variables that we create inside this file are stored in this format only.

The default behavior of Next.js environment variables is that these variables can only be accessed inside the Node.js environment.

“getStaticProps” and “getServerSideProps” are two methods that are provided to us by Next.js which give us a Node.js environment, which helps in data fetching and server-side rendering. If you don’t know about these methods, I’d recommend you to read about them here, to understand this article better.

Both these functions support the Node process model, which is a global object, meaning it can be used without using “require”. Inside these functions, you can write regular Node.js code. Since these functions support Node.js, you can use the “process.env” to access the environment variables.

These functions, in the end, return an object, which has a “props” key, which again is an object and this object contains all the props we want to use in our application.

Take a look at the example below:

// pages/index.js (inside the pages directory, rendering "index.js")
export default function Home(props) {

return <h1>{props.secret}</h1>;

}

function getStaticProps() {
 return {
  props: {
   secret: props.env.NAME
  }
 }
}

Here, when we request the “index.js” page, “getStaticProps” will run first before the “Home” functional component, returning the “props” object, which will hold a prop called “secret”, whose value we are fetching from the environment variable which we set earlier.

After this function has finished, we can access the “secret” props inside our “Home” component. This way, our secrets remain safe and our app works the way it worked earlier.

I would recommend learning more about getStaticProps and getServerSide props, as they can do much more rather than just helping with the environment variables. Take a look at their official documentation here.

Conclusion

Next.js is a very impressive framework for React to make a production-ready application. It not only offers environment variables but much more. You can take a look at their official documentation here.

At one point or another as a developer, you will be required to store some information somewhere where it is not exposed to the end-user, and using environment variables helps us in achieving that.