Environment variables are very useful when it comes to building modern web applications. NextJs has built-in support for the variables defined within the env.local file and automatically exposes those in the process.env object.

In this article, we’ll take a quick look at how to sue env variables across our application

Environment variable

Let’s start by creating the

.env.local

file in the root directory of our application.

Example

I have defined a couple of variables in the newly created file, you can take a look at those here

DB_HOST=localhost
DB_USER=user1232
DB_PASSWORD=admin123
PORT=5432
API_KEY=fdt43b24d34c43v256bvra4tsds4v3bv
...

Hopefully, you get the idea of what syntax to use and for which values it makes sense to store them there.

You can then access those values on the process.env global object available anywhere in the NextJS application.

process.env.<variable-name>

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.