Deploy a Next.js App to Vercel From GitHub with Environment Variables

Colby Fayock: [0:00] We've taken all the time we needed to prepare our store. Now let's get it out and deploy it to the world. To do this, we're going to use Vercel, who's actually the creators of Next.js.

[0:08] Where we're going to be able to have a development pipeline that's going to be able to build our project. It's even going to preview as it shows here. Then we're going to be able to deploy it to a CDN across the world, where people are going to be able to visit our store.

[0:20] To get started, you're going to want to have your repository up on that git provider of your choice. I'm using GitHub for this walkthrough. I know that Vercel also supports GitLab and Bitbucket, but really that's your choice.

[0:32] I prefer GitHub for my work. We want to take that repository, which we're going to sync up with Vercel, but we're going to deploy it. Once we're on Vercel, we're going to want to sign up for a free account. You can do so with either GitHub, GitLab, Bitbucket.

[0:46] Just like I mentioned, you're going to want to likely use the same account that you're using to host your repository on your git provider of choice. I'm going to use my existing account to deploy this application.

[0:57] If this is your first time using Vercel, you're likely not going to have all these projects inside here. Either way, we're going to want to create a new project for our new store. We're going to head over to new project.

[1:09] Here, we're going to want to scroll down and we're looking for this import git repository. We can see all of my projects here that are ready to import. We can see my Space Jelly Gear here, which is the one that I created, and I can easily hit import here.

[1:22] What I'm going to do is instead is, I'm going to copy that string and I'm going to paste it right into the search because that way we can search for any repository, where then we can click import. The next page is going to allow us to configure our application.

[1:34] Since we're using Next.js, we really don't need to do much. It's already going to configure all the build settings that we need to get this application out to the world. There is one caveat though.

[1:45] Currently, the way the application is set up is, we're just pasting in our Snipcart API key right inside of the application, which the API key for Snipcart is going to be public anyway. It's probably not that big of a deal.

[1:58] Especially because we're going to be juggling between a test API key and a live API key whenever this is deployed to the world. We likely want to use an environment variable to make sure that we don't have to worry about that.

[2:09] To get started, what we can do is create an environment variable for our Snipcart API key. Then later, we can push a change to use that environment variable. In this little tab called environment variables, I'm going to click and open it.

[2:21] I'm going to call this next_public_Snipcart_API_key. Snipcart API key is just the description of that. That can be whatever you want. It's important to make sure we have Next_public in the front of this.

[2:36] As this is going to tell Next.js that we want this key available inside of the actual front end of the application. Then over in Snipcart, we can grab our API key again. For now, I'm going to use the test one to make sure that we're not trying to do anything live yet. I'm going to grab that value, and head back over to Vercel. I'm going to paste that right into the value field.

[2:57] Then, I can click add and we can see that it's under that list. Now, we can click to play. At this point, Vercel's going to go grab our repository, pull it down onto its own infrastructure. It's going to build that project, install all the dependencies, and it's going to then try to deploy out to the world.

[3:13] Once it's done, Vercel shows us some awesome confetti, and we can even see a preview of our new project as a little image here. Then if we click that and open it, it's going to go in a new tab, where we can see that the site is now deployed to myspacejellygear.vercel.app.

[3:28] Let's take that a step further and create our environment variable for our Snipcart API key. Looking back inside of _document.js, this is where we added our Snipcart snippet, where we can see this data API key field.

[3:40] What we're going to want to do, is we're going to replace this API key value with our environment variable. In the root of our project, we're going to create a new file called .env.local. Where right inside is where we're going to add our environment variable.

[3:54] I'm going to write next public Snipcart rather, API key, where then, I can set it equal to that value. First, I'm going to copy that value and paste it in.

[4:07] Then, I can grab this environment variable name, and then I can replace this key with a dynamic value, where I'm going to enter process.env.my environment variable name, so process.env.nextpublicsnipcartapikey. If at this point your Dev server is already spun up, you want to make sure you restart it so that it can grab that environment variable.

[4:29] Then once we run your Dev, we can see that before it compiled, we have this info block that says that it loaded the environment from our .env.local. Then if we look in our browser at our local server, we can see that it's working as expected.

[4:43] If I click on the cart, we can see everything that I had before. We can commit that change, and once we push it out to GitHub, if we keep an eye on the Vercel dashboard, what's going to happen, is they're going to see that new commit and they're going to automatically build that branch specifically, because we pushed it to our main branch.

[5:02] Every time it has that new commit, it's going to deploy it to the production. We can see that it was successfully deployed with our new commit. If I head over to the site again and refresh, we can see that I'm going to have my shopping cart where it's not going to be the same shopping cart, because now we're on a different domain.

[5:19] If I click it, we can see that it is working, and I am successfully loading Snipcart. I can even scroll down at our products like the mug.

[5:27] Then head over to the product page, which we notice is really snappy because now it's deployed statically. Now we can add a cart from there, and we can see that we have all of our products, and we're ready to go with Snipcart.

[5:38] While I'm not going to walk through this flow, the cool thing about using a pipeline like Vercel is, if you use a different branch and create a pull request from that different branch, Vercel is going to create preview deployments for each and every one of those branches.

[5:51] That way, you can still see what it looks like deployed before you actually merge it into production, meaning it makes it a lot easier to debug. In review, we wanted to deploy our Space Jelly Gear store out to the world so people can come and buy our products.

[6:05] To do that, we used Vercel where we synced up our GitHub repository, which automatically took care of the entire process of both building our project and deploying it out to a CDN.

[6:16] To make sure that we have opportunity to be able to rotate our Snipcart API key, and so that we can have both a testing and production key, we set up an environment variable for Next public Snipcart API key.

[6:28] Where we set up that environment variable locally, as well as on Vercel when we were deploying. Now our store is deployed, and we can set it live whenever we're ready to go.