The open blogging platform. Say no to algorithms and paywalls.

How to Use Environment Variables in Next.js

Take a look at how to use environment variables in Next.js.

image

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.




Continue Learning