Next.js 部署到 GitHub Pages 教程

Next.js 部署到 GitHub Pages 教程

nextjs-github-pages🚀 Deploy a Next.js app to Github Pages via Github Actions.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-github-pages

项目介绍

nextjs-github-pages 是一个开源项目，旨在通过 GitHub Actions 将 Next.js 应用部署到 GitHub Pages。该项目支持 Next.js 的 App Router，并提供了详细的配置指南和最佳实践。

项目快速启动

克隆项目

首先，克隆项目到本地：

git clone https://github.com/gregrickaby/nextjs-github-pages.git
cd nextjs-github-pages

安装依赖

安装项目依赖：

npm install

配置 Next.js

编辑 next.config.js 文件，添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  basePath: "/nextjs-github-pages",
  images: {
    unoptimized: true,
  },
};
 
module.exports = nextConfig;

添加 .nojekyll 文件

在 public 目录下添加 .nojekyll 文件，以禁用 GitHub Pages 的 Jekyll 构建：

touch public/.nojekyll

部署到 GitHub Pages

1. 创建 GitHub Actions 配置文件 deploy.yml：

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm run build
      - run: npm run export
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

2. 提交代码并推送到 GitHub：

git add .
git commit -m "Initial commit"
git push origin main

应用案例和最佳实践

应用案例

• 静态网站：使用 Next.js 构建的静态网站可以轻松部署到 GitHub Pages，适用于个人博客、文档站点等。
• 开源项目文档：许多开源项目使用 Next.js 构建文档站点，并通过 GitHub Pages 进行部署。

最佳实践

• 优化图片：虽然 GitHub Pages 不支持 Next.js 的图片优化功能，但可以通过其他工具（如 ImageOptim）预先优化图片。
• 使用 GitHub Actions：利用 GitHub Actions 自动化部署流程，确保每次提交都能自动部署到 GitHub Pages。

典型生态项目

• Next.js：一个用于构建服务器渲染的 React 应用程序的框架。
• GitHub Actions：GitHub 提供的自动化工作流工具，用于构建、测试和部署代码。
• GitHub Pages：GitHub 提供的静态网站托管服务，适用于托管静态网页和项目文档。

通过以上步骤和最佳实践，您可以轻松地将 Next.js 应用部署到 GitHub Pages，并享受自动化部署带来的便利。

nextjs-github-pages🚀 Deploy a Next.js app to Github Pages via Github Actions.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-github-pages