Set environment variables in Next.js

While working on a Next.js website, I had a need to use environment variables in some parts of the website. There were several reasons for me to use environment variables in my project.

However, I am going to discuss only one of the cases, while showing you a way of storing variables that can be used globally across a React application.

Below you can find instructions, based on my notes, of using environment variables in a Next.js website.

What are environment variables

Environment variables are predetermined variables, set outside of application, but can be used inside application through reference. For instance, environment variables can be used to store sensitive credentials like API keys.

Importatnt to note, there is no need to download additional package in order to set and use environment variables in a Next.js project. Next.js already comes with built-in support for these kind of variables.

Why use environment variables

There might be several good cases of using environment variables. One of them is to be able to set up different configuration options for different environments.

For example, you can enable or disable a specific functionality of your application, depending if it is run in a development environment or a production environment.

Another example could be having an ability to avoid writing API key directly in your code while using external API. In other words, you want to avoid sharing your sensitive information, for example, in a Git repository.

This is the case why I use environment variables at the moment.

My personal case

To create a contact page in Next.js, I needed to use a 3rd party service for delivering emails. It was done using API provided by the service.

However, to create a connection between a Next.js website and the service, I had to use a special key, provided by the service, and a verified email address.

Since I did not want these values to be hard coded in the website's code, I used environment variables to avoid exposure of these values — API key and email address — in a source code of my website.

How to set environment variables

To be able to use environment variables in development environment:

1. Open a project with your website in Visual Studio Code, or any other preferable code editor.
2. In a root directory of the project, create a new file and name it .env.local.

This newly created file is responsible of holding your environment variables.

Here is an example of environment variables added to the .env.local file:

SERVICE_API=VerySecretAPIkeyValue
POSTMARK_EMAIL_FROM=example@mail.com
EMAIL_TO=anotherexample@mail.com

Note, there are no spaces between the variable, equality sign and the value itself.

All variables defined in the file are accessible in the code via process.env.<VARIABLE_NAME>.

Here is an example of using environment variables in application:

const postmarkApp = new postmark.ServerClient( process.env.SERVICE_API );

There are several things to remember when setting environment variables in a Next.js based project.

Environment variables in production

Due to easiness of use, my Next.js website is hosted on Vercel. I use a git command to push updates to GitHub, and Vercel automatically updates my website when a new version is available.

However, the file with environment variables is not available in my Git repository, which means that Vercel is not aware of these variables by default.

Thus, before using environment variables in production at Vercel, these values have to be set in the settings.

Git repository ignore files

Another very important thing is to make sure the .env.local file is not pushed to your Git repository when making updates:

1. In a root directory of the project, locate the .gitignore file.
2. Make sure .env.local is defined in the .gitignore file.

In short, .gitignore tells git which files (or patterns) it should ignore.