Deploying Next.js to GitHub Pages

Hosting a static Next.js site on GitHub Pages is efficient and free. This guide covers the steps to automate deployment.

Prerequisites

1. A Next.js project.
2. A GitHub repository.

Configuration

Update your `next.config.ts`:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true }
};

GitHub Action

Create `.github/workflows/deploy.yml`:

name: Deploy to GitHub Pages
on:
  push:
    branches: ["main"]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
            node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
            path: ./out
      - uses: actions/deploy-pages@v4