How to deploy a Nextjs app to GitHub pages?

Nextjs + GitHub pages

How to deploy a Nextjs app to GitHub pages?

Deploy the nextjs app on the GitHub page with copy-paste code.

Deploying the nextjs app on GitHub pages needs to be clarified for beginners. I had no idea when I first deployed the nextjs app on the GitHub page. Then I watched many YouTube videos on it, and one thing is to confirm I need GitHub action, but which GitHub action was used to deploy the nextjs app on the GitHub page, and how does it work?

All the stuff frustrates me. In this article, I explain everything related to nextjs deployment on the GitHub page. I'm 100% sure you never need any watch or read other articles and tutorials about it.

Requirements

1. GitHub repository
2. Make sure your GitHub repository in public

All the codes are available on GitHub.

Let's start it

1. Create a new nextjs app
2. GitHub repository
3. Steps for deploying on GitHub pages repository

Create a new nextjs app

The first step is to create a new nextjs app with create-next-app@latest cli.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

If you have already created a project, then skip this part of the article.

GitHub repository

The next step is to set up or create a new GitHub repository, push your local code into the GitHub repository, and make sure your repository is public.

For organizations, if you are a free user, make sure your GitHub repository is public, and for paid users, it works fine with public and private repositories.

Steps for deploying nextjs on GitHub pages

1. Go to the GitHub repository settings > pages.

2. The second step is to click to deploy from a branch button.

3. After clicking the deploy from a branch button and the new popup is open, select the GitHub action.

4. After selecting the Github action, you see the nextjs GitHub action. After clicking the configure button.

5. The next step is to config workflow yml file for GitHub action. Then click on the start commit button.

6. The next step is clicking the commit new file button.

7. After creating a GitHub action workflow config file, wait until the workflow is complete. Sometime later, you see a production URL.

Errors

1. The package-lock.json and yarn.lock the file is not found.
2. The image, CSS and JS files are not loading correctly.

The package-lock.json and yarn.lock file is not found.

If you see the following error, The error occurs due to not finding the
package-lock.json and yarn.lock file.

The main reason is if you use the pnpm package manager for creating a new project. pnpm package manager does not create package-lock.json and yarn.lock file.

I already wrote a detailed article on resolving this error; you can read it on my blog.

https://officialrajdeepsingh.dev/question/how-to-generate-a-yarn-lock-file-based-on-a-package-json-file-for-npm-or-pnpm/

The image, CSS and JS files are not loading properly.

If you can deploy your nextjs app on GitHub pages, your website assets ( CSS, JavaScript and image ) do not load properly. The solution is straightforward add the basePath property in your next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

 // Add basePath
  basePath: '/github-pages',

}

module.exports = nextConfig

Your basePath contains your repository name or repository URL. For example, purpose in my case. My production domain looks like https://officialrajdeepsingh.github.io/github-pages/, and my basePath is github-pages.

Conclusion

I hope I have resolved your problem entirely. Can you ask anything else in the comment section?

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.