How to host next js app on GitHub pages using GitHub Actions | CI/CD

If you want to host your Next.js app on GitHub Pages and automate the deployment process using GitHub Actions for continuous integration and continuous deployment (CI/CD), then you are in the right place. With GitHub Actions, you can automate the deployment process and make it easier to host your Next.js app on GitHub Pages.

Prerequisites

• Next.js app hosted on GitHub
• Basic knowledge of GitHub Actions

Step 1: Set up GitHub Pages

Before enabling GitHub Actions, you need to set up GitHub Pages for your Next.js app. You can do this by going to the settings of your GitHub repository and scrolling down to the GitHub Pages section. From there, you can choose the source for your GitHub Pages deployment, such as the ‘gh-pages’ branch.

Step 2: Create GitHub Actions workflow

In the root directory of your Next.js app, create a new file called `ci-cd.yml` under the `.github/workflows` directory. This file will contain the instructions for GitHub Actions to automate the deployment process.

“`
name: Deploy to GitHub Pages

on:
push:
branches:
– main

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v2
– name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: ’14’
– name: Install dependencies
run: npm install
– name: Build
run: npm run build
– name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@4.1.4
with:
ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: .next
“`

Step 3: Commit and push changes

After creating the `ci-cd.yml` file, commit and push the changes to your GitHub repository. This will trigger the GitHub Actions workflow and start the deployment process.

Step 4: Verify deployment

Once the GitHub Actions workflow has completed, you can verify the deployment by going to the GitHub Pages URL for your Next.js app. If everything was successful, you should see your Next.js app live on GitHub Pages.

Conclusion

Hosting a Next.js app on GitHub Pages using GitHub Actions for CI/CD is a great way to automate the deployment process and make it easier to manage your Next.js app’s deployment. By following the steps outlined in this article, you can effectively host your Next.js app on GitHub Pages with GitHub Actions.