How to deploy your Next.js app to GitHub pages for free

Next.js is a popular framework for building React applications. If you’ve built a Next.js app and want to deploy it for free, GitHub pages provides a convenient option for hosting your app. In this article, we’ll walk through the steps to deploy your Next.js app to GitHub pages.

Step 1: Create a GitHub repository for your Next.js app

First, you’ll need to create a GitHub repository for your Next.js app. If you don’t already have a GitHub account, you’ll need to sign up for one. Once you’ve created your account, you can create a new repository by clicking on the “New” button on the top right of the GitHub homepage.

Step 2: Install the gh-pages package

Next, you’ll need to install the gh-pages package, which provides an easy way to deploy static sites to GitHub pages. You can install the package by running the following command in your Next.js project’s directory:

npm install gh-pages --save-dev

Step 3: Update your package.json file

Next, you’ll need to update your package.json file to add some deployment scripts. Add the following lines to your package.json file:


"scripts": {
"predeploy": "next build",
"deploy": "gh-pages -d out"
}


Step 4: Deploy your app to GitHub pages

Now that you’ve installed the gh-pages package and updated your package.json file, you can deploy your Next.js app to GitHub pages by running the following command in your project’s directory:

npm run deploy

Step 5: Access your deployed app

Once the deployment process is complete, you can access your deployed Next.js app by visiting the GitHub pages URL for your repository. The URL will be in the format https://yourusername.github.io/repositoryname.

Conclusion

Deploying your Next.js app to GitHub pages is a simple and free way to host your app. By following the steps outlined in this article, you can quickly and easily make your Next.js app available for others to use. Happy coding!