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

InstructorColby Fayock

Share this video with your friends

Send Tweet

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.

~ 3 years ago

When I push, I am returning the following error:

error: src refspec main does not match any

Any suggestions?

Colby Fayock(instructor)

~ 3 years ago

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

~ 3 years ago

How can I check that?

Could you provide a step by step instruction list?

After the yarn build,

I created a repo on git up

set to private AND public (same erorr)

Initialized the repo in VS CODE

git init

I used the git add -A

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

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

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

used SSH remote command

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

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?

~ 3 years ago

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

After yarn build,

cd to the app directory
git init .
git add README.md
git commit -m "<app name>"
git branch -M master
git remote add origin https://...
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?

~ 3 years 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?

~ 3 years 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:

Ctrl + Shift + P to open the command palette
Type - 'Git Add Remote'
Give your repository the same name as the project
Enter https URL from Github
Enter a remote name (the same across environments) ** Steps 4 or 5 might be reversed depending on your prompts **
In your Bash terminal enter: git remote add <name of repo> <remote repo provided by GitHub>
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 **
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 **