Next.js environment variables

A guide on how to use Next.js environment variables

Friday, November 19, 2021

How to create an environment variable for Next.js

First, create a file with a starting in `.env`.

Depending on the run-time environment, a custom .env file can be created suce as the following:

.env.development - when running next dev
.env.production - when running next start
.env.local - will override .env, .env.development, and .env.production
.env.test - when running jest OR cypress
host environment variables - AWS, Heroku, Vecel, etc. provide an interface to set environment variables directly

Next, inside the created `.env` file, add the variables to be used

.env1VARIABLE_NAME=VALUE

This will be accessible via proccess.env

.js1console.log(process.env.VARIABLE_NAME);

Two types of environment variables

Server-side expose variables
Browser exposed variables

1. Server-side variables

Every variable set in an .env* file will be available on the server-side. Including the second type

.env123DB_HOST=secret_hostDB_USERNAME=usernameDB_PASSWORD=password

Above variables can be used in the server-side code such as getStaticProps, getServerSideProps, or in /api

.js1234567export function getStaticProps() {  connectToDatabase({    host: process.env.DB_HOST,    username: process.env.DB_USERNAME,    password: process.env.DB_PASSWORD,  })}

2. Browser exposed variables

Accessing the sample variables above will yield undefine. In order to make a variable available to the browser, it should be prepended with NEXT_PULIC_.

.env12NEXT_PUBLIC_GOOGLE_ANALYTICS=abcde12345NEXT_PUBLIC_NOT_SO_SECRET_URL=https://example.com

Even though there will be more keystrokes, I like this convention as it clearly distinguishes what variables are available to the client-side. It is less likely that I will expose any sensitive information to the user.

As per the variables above, it can be used anywhere in React land. For example, when setting the Google analytics key.

.jsx1234567// _document.tsx<Head> <script  async  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} /></Head>

Another usage is for something publicly accessible but should not be committed to the repo.

.jsx1234useEffect(() => {  fetch(`${process.env.NEXT_PUBLIC_NOT_SO_SECRET_URL}`)  // ...})

Although you can still access a browser exposed variable in your server-side code, it will not make sense to do it.

Make sure any sensitive information should not be committed in the repo.

Conclusion

Next.js provides an easy way to set environment variables in any run-time environment. It also provides a good convention to separate variables that can be used on the client-side.