How to Deploy Next JS with Environment Variables

In the previous article, we discussed how to use environment variables in Next JS. But that was in the local environment. But when we deploy our app then how we can add the env variables and also make them private? So in this article, we are going to learn Deploy Next JS with Environment Variables in Vercel and Netlify for free.

Part 1 – How to use Environment Variables with Next JS

Part 2 – How to Deploy Next JS with Environment Variables

Deploy Next JS with Environment Variables on Vercel

Vercel is the parent company of Next JS. So it is the best place to deploy Next JS apps for free.

1. For this first go to Vercel.com and log in with your git provider. It has GitHub, GitLab and BitBucket login support. After login click on Create a New Project.

2. Now you’ll see the projects you have in your account. Select the project you want to deploy by clicking the import button.

3. Now you will see the deployment setting for your projects. Give your project a name. Your repository name is the default name for your project. Now click on the Environment Variables section.

4. Now you will get the option to add Environment Variables and their values. You can add multiple Environment Variables at there. Don’t worry if you forgot to add any Environment Variables. We will discuss how to add more Environment Variables after the deployment

Also Read: How to use both Tailwind and Styled Components in Next JS

Add or edit Environment Variables after deployment in Vercel

5. After deployment navigate to the dashboard for that project and click on the settings tab. Then on the sidebar, you will get an option for Environment Variables. Click on that.

6. Now you can add more Environment Variables here. You can set Environment Variables for Production, Preview and Development modes. You can even set Environment Variables for a specific branch. Click on save after adding new Environment Variables.

7. At the bottom of that page you will get an option to edit or delete your existing Environment Variables.

Also Read: How to Add Google Analytics in NextJS

Deploy Next JS with Environment Variables on Netlify

Netlify is another good option to deploy your Next JS app. It has almost all that vercel has for deployment.

1. First go to app.netlify.com to log in or create an account. Netlify also has GitHub, GitLab and BitBucket login support. After login click on Create a New Project.

2. Now go to the dashboard of the account and click on Import an Existing Project. You can also use the template from Netlify.

3. Then you will get a page where you can choose your repository from any git provided. I will choose GitHub. Now you will have to authorize Netlify in the popup so that you can access the repository there.

4. You will get all your repository lists now. Chose the repository you wanna deploy.

5. Now you will be on the deployment settings page. Add or edit your changes and scroll a bit. Then click on the Show Advance button and then you will see the Environment Variables section. Add your Environment Variables here. Now click on the deploy button.

Also Read: Next JS Project Ideas to Boost Your Portfolio

Add or edit Environment Variables after deployment in Netlify

6. After deployment you can edit or add new Environment Variables. For that go to Site Settings. Then on the sidebar, you will get an option for Environment Variables. And there you can check your existing Environment Variables. You can also add new Environment Variables by clicking Add a Variable button.

7. To edit or delete an existing Environment Variables click on the variable. After that, you will get an option for production, preview, and branch Environment Variables.

Conclusion

Environment Variables are so important for any Next JS and React JS project. So to deploy your projects with this feature, you can add Environment Variables in your deployment providers.

That’s it for the Environment Variables with Next JS. Check out other articles on Next JS and other web development-related topics.