Host & Deploy a Next.js React App on Vercel imported from GitHub

Colby Fayock
InstructorColby Fayock

Share this video with your friends

Send Tweet
Published 11 months ago
Updated 10 months ago

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.

~ 5 months ago

When I push, I am returning the following error:

error: src refspec main does not match any

Any suggestions?

Colby Fayock
Colby Fayockinstructor
~ 5 months ago

thats strange 🤔 is the branch the same name in both github and vercel? does it have permission to see the repository?

~ 5 months ago

How can I check that?

Could you provide a step by step instruction list?

After the yarn build,

  1. I created a repo on git up

set to private AND public (same erorr)

  1. Initialized the repo in VS CODE

git init

  1. I used the git add -A

got some warnings saying 'LF will be replaced by CRLF in .gitignore'

  1. git commit -m "<app name with spaces NOT the same as the folder naming format>"
  2. git config --global user.email "<an email>"
  3. git config --global user.name "<username>"
  4. git commit -m "<app name with space NOT the same as the folder naming format>"

<a number> files committed, <a number >of insertions

  1. used SSH remote command

git remote add origin "<git@githubcom.com....>" ALSO used, "https://...." For both public and private modes

  1. attempted to push using

git push -u origin main

-- after step 9, I returned the error above.

I see I ran the commit step twice. Should I close the terminal and start over? If so, which steps should I follow?

~ 5 months ago

Sorry for the mark-up above. A cleaner version is this.

After yarn build,

  1. cd to the app directory
  2. git init .
  3. git add README.md
  4. git commit -m "<app name>"
  5. git branch -M master
  6. git remote add origin https://...
  7. git push -u origin master

Error: git@github.com: Permission denied (publickey). fatal: Could not read from remote repository

Please make sure you have the correct access rights and the repository exists

Any tips?

~ 5 months ago

generated a ssh key using: ssh-keygen -t <value> -C email@email.com

then, eval $(sshe-agent -s)

after, ran ssh-add -1 -E sha256 to generate one public and two private keys...

Do not know how add a passphrase to the private key, but I can for the public key. Is the method the same?

~ 5 months ago

OK -- problem averted! These are the steps for future viewers.

Prep: MAKE SURE you cd your directory to the project assets folder a. Create new repository on Github (keep name consistent with the name you gave the project in your code IDE) b. Right-click the activity bar on the left panel of VS Code to add 'Source Control' c. Select your project folder d. If you see a 'U' next to any element of the file folder, type 'init' into the 'Search' field from the 'Source Control' tab

Main Steps:

  1. Ctrl + Shift + P to open the command palette
  2. Type - 'Git Add Remote'
  3. Give your repository the same name as the project
  4. Enter https URL from Github
  5. Enter a remote name (the same across environments) ** Steps 4 or 5 might be reversed depending on your prompts **
  6. In your Bash terminal enter: git remote add <name of repo> <remote repo provided by GitHub>
  7. In your Bash terminal enter: git branch -M main ** you might use 'master' instead of 'main' depending on the value in the parenthesis (main) || (master) at the end of the Bash command line **
  8. In your Bash terminal enter: git push -u <name of repo> main
    ** you might use 'master' instead of 'main' depending on the value in the parenthesis (main) || (master) at the end of the Bash command line **