Deploying your first NextJs app to GitHub pages

DanielOctober 27, 2022April 12, 2023

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.