How to add, edit or remove environment variables in Vercel

Oscar de la Hera Gomez
A flower that represents Vercel with the text "Environment Variables” beneath it.

A guide to adding, removing or editing env variables in Vercel.

Environment variables hosted on Vercel are used in the same way as those defined in a .env file.

To learn more about how to use them, consult the link below.

Step One: Access the Project

A screenshot of Vercel showing the page that appears after you login. Highlighted is the tile from the deployment of our open source project.

Login to Vercel and click on the tile for the project where you wish to add, edit or remove environment variables.

To learn how to create a Vercel account or deploy a project, consult the link below.

Step Two: Settings

A screenshot of Vercel showing a project page. Highlighted on is the settings tab.

In the project page, click the Settings tab.

Step Three: Environment Variables

A screenshot of Vercel showing a projects settings page. Highlighted on the left menu side bar is the "environment variables" tab.

In the project settings, select the Environment Variables tab on the left menu sidebar.

Step Four: Add

A screenshot of Vercel showing the environment variables page. Highlighted is the area where you can add new environment variables.

Enter the key and value.

In the event that you want to add another, click add another.

A screenshot of Vercel showing the environment variables page. A new environment variable has been added. Highlighted below it is the "Save" button.

Once you are done, click save.

Step Five: Edit or Remove

A screenshot of Vercel showing the environment variables page. Highlighted is the pop up that appears after you select the three dots button next to an environment variable. The pop up allows you to edit or remove the environment variable.

Scroll down to find previously declared environment variables.

Next to the environment variable that you wish to edit or remove, click the three dots and in the pop up that appears, select edit or remove.

A screenshot of Vercel showing the environment variables page. An existing environment variable has been selected to be edited and highlighted is the options that appear which allow you to edit an existing environment variable.

In the event that you chose edit, make the required changes and click Save.

In the event you chose edit but do not want to make changes, click cancel.

Please note that you must redeploy the project for the changes to take effect

Follow the guide below to learn how to manually redeploy a Vercel project.

Looking to learn more about NextJS, ReactJS or web development?

Search our blog to find educational content on NextJS, ReactJS and web development.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details