Host & Deploy a Next.js React App on Vercel imported from GitHub
In order for someone to buy your products, your store needs to be publicly available.
Vercel is a hosting and deployment solution that works perfectly with Next.js—they're the ones who made it! We can use Vercel to easily deploy our site from GitHub and automatically update our store any time we add any changes. We'll walk through connecting a git repository to Vercel and see exactly how it deploys new versions with each commit to our repo.
Lecturer: [0:00] Now that we have the basics of our store, we want to host and deploy this somewhere and make it available for the world. We're going to use Vercel, which is the company that makes Next.js, to host and deploy our site. Before we do this though, let's get a better understanding about what happens when we build our site.
[0:12] Whenever our website gets deployed, it's going to build first, which we can simulate by running yarn build. Once it's done, we can see the output of what happened. Particularly, we can see the steps that it took to create our build, including optimizing our build, compiling it, and collecting the page data, which it then turns into static pages.
[0:30] This page-building process is dynamic where if we're only using static methods to get our data, it's going to render it as static. If we're using server-side methods, like getServerSideProps, it's going to be needed to run on a server.
[0:42] In our case, all the pages that we created were static. If we look at the legend at the bottom, we can see that the empty circle means static, where if we look back up at our home page, we can see that it's represented by the empty circle, meaning our home page is static.
[0:54] On the other hand, even though we're not using any of the API's as part of our app, the default Next.js starter comes with an API with a Hello World function. We can see that that's represented by a server function. Along with our pages, it also compiles out all of our assets, including the JavaScript and the CSS. Let's get this deployed out to Vercel.
[1:12] The first thing we need to do in order to deploy the Vercel is create a GitHub repo, where we're going to store our app. Once you're logged into the GitHub account, you can go to the Add button at the top right of the screen, select new repository, and we have this form, where we can fill out for our new repo.
[1:25] I'm going to name this the same as my project, so MyEcomStore. I'm going to leave this publicly available because I don't have anything secret here. Because Next.js initializes the repository for us, we're going to skip adding any of these files, and we're going to go ahead and click Create Repository.
[1:39] Once we have our repo, we want to scroll down, and we're going to add a new repository on the command line. First, we want to add all of our current changes and also commit those changes, so I'm going to say, "MyEcomStore." If we go over to GitHub, we can see that it's creating a new main branch.
[1:53] Because we're already on a main branch, we don't need to worry about that. The first thing we're going to do is copy and paste this add remote origin into our command line, hit Enter, then we can copy this git push command, and run it in our terminal. We can see that our changes get pushed out. When we reload our GitHub page, we can see all of our files are on GitHub.
[2:10] Now that we have our GitHub repo, let's head over to Vercel, where if we have an account, we want to log in. Otherwise, you can sign up for a free account. When creating your account, I recommend you use your GitHub account if you're using a GitHub repo or really any Git provider that you're currently using for your repository.
[2:24] Once we're logged in, we want to select Import Project, where we then want to import a git repository. Here, we can go back over to our GitHub repo where we want to copy the URL. We're going to paste that right into Vercel, and click Continue.
[2:37] The next thing we'll see is the configuration for our project in Vercel. Because we have a Next.js app, Vercel already knows how to build and deploy that. We can update the product name or leave it as is, which I'm going to leave it as My Ecom Store. Then, we can scroll down and click Deploy.
[2:50] Vercel is immediately going to install all the dependencies, build the project, and deploy it. Once it's done, they show a congratulations screen, where we now have our deployed project. We can even see it by clicking the visit link, where we see our new shop online.
[3:03] Part of the great thing about hosting our project on GitHub and deploying it with Vercel is anytime we push a new change at the GitHub, that's going to be automatically deployed to the Web. We can test this out by making a quick change.
[3:13] Back on a development server using localhost, we can see that our page is just the same as it was before, but I noticed that not only is this the best space jellyfish swag on the Web, this is the best space jellyfish swag in the universe.
[3:26] Inside my code, I'm going to change this from on the Web to in the universe. We can see with our development server that that automatically changes. We can add those files with git. We can also commit the changes, updating the description, and we can also push those changes.
[3:41] Back on our dashboard for our Vercel project, we can scroll down, and we can see that not only does our branch show our latest changes, we can open up our app. We can see that it already deployed the changes. This works because anytime Vercel sees a new change on our main branch, it's automatically going to trigger that build and deploy process.
[3:59] To recap, we had our project running smoothly on our development server, but we wanted to deploy this to the Web. The first thing we did is we put it on GitHub to make it available, where we then imported it into Vercel as a new project. Where anytime we push a commit out, it automatically deploys that change, which makes our app and our store available to the universe.