DEV Community

Cover image for Next.js environment variables
Carlo Gino Catapang
Carlo Gino Catapang

Posted on • Updated on • Originally published at l.carlogino.com

Next.js environment variables

#javascript #webdev #react #nextjs

A guide on how to use Next.js environment variables

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 

VARIABLE_NAME=VALUE
Enter fullscreen mode Exit fullscreen mode

This will be accessible via proccess.env

console.log(process.env.VARIABLE_NAME);
Enter fullscreen mode Exit fullscreen mode

Two types of environment variables

  1. Server-side expose variables
  2. 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

DB_HOST=secret_host
DB_USERNAME=username
DB_PASSWORD=password
Enter fullscreen mode Exit fullscreen mode

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

export function getStaticProps() {
  connectToDatabase({
    host: process.env.DB_HOST,
    username: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
  })
}
Enter fullscreen mode Exit fullscreen mode

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_.

NEXT_PUBLIC_GOOGLE_ANALYTICS=abcde12345
NEXT_PUBLIC_NOT_SO_SECRET_URL=https://example.com
Enter fullscreen mode Exit fullscreen mode

Even though there will be more keystrokes, I personally like this convention as it gives a clear distinction of 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, setting the Google analytics key.

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

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

useEffect(() => {
  fetch(`${process.env.NEXT_PUBLIC_NOT_SO_SECRET_URL}`)
  // ...
})
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Read next

kkr0423 profile image

React Basics~unit test/user event

Ogasawara Kakeru -

arhamrumi profile image

Installing Node.js on Windows: A Complete Tutorial

Arham Rumi -

qwadrox profile image

How I Deployed Next.js to cPanel on Shared Hosting

Boros Máté -

jacksonkasi profile image

Deno HAR Parser: Simplify Your Network Debugging 🚀🦕

Jackson Kasi -