Deploying your first NextJs app to GitHub pages

GitHub pages can be a simple and easy-to-use hosting solution for your NextJs learning projects. Let's see how we can deploy a first Hello world app to GitHub Pages.

First, we will need to create a blank new GitHub repo. I will name the repo nextjs-helloworld.

Next from the Setting tab of the repo go to the Pages menu and select the GitHub Actions option.

This will allow us to set de project build flow as Next Js.

Finally, GitHub will generate a .github/workflows/pages.yml page for us to describe the deploy flow for GitHub pages.

So far so good. For the moment our project is empty, so let's make it a NextJs project! We will first check out the git project on our local machine.

git clone https://github.com/your_github_username/nextjs-helloworld.git

It will only contain the pages.yml file. Let's go ahead and install NextJs and React.

npm install next react react-dom

Be sure to add to your project a .gitignore file for the node_modules and Next files.

/node_modules
.next

Will create a pages folder containing an index.js file. Inside this file will have a simple React component with just a Hello world text.

export default () => (
    <div>
        <p>Hello World!</p>
    </div>
)

Next, save all and push all to GitHub.

git commit -am  "added first component"
git push

With all of this in place, Github will start the deployment to Github pages. Be sure to check that the build status is green.

And finally, you can see your live project at:

https://daniel-jscraft.github.io/nextjs-first/

Just be sure to use your real Github username.

If you want you can download my code from here. Just be sure to run npm install and npm run dev to start the project.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X