Next.js GitHub Pages

使用GitHub Actions将Next.js部署到GitHub Pages。查看已部署的应用 🚀

现在支持Next.js App Router了！如果你需要Pages Router支持，请点击这里。

⚠️ 注意！GitHub Pages 不支持无服务器或边缘函数。这意味着动态功能将被禁用。查看所有不支持的功能。

配置Next.js

Next.js配置

首先，你需要配置Next.js以部署静态导出。这是GitHub Pages工作所必需的。

打开next.config.mjs文件
添加以下内容：

/** @type {import('next').NextConfig} */
const nextConfig = {
  /**
   * 为App Router启用静态导出。
   *
   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
   */
  output: "export",

  /**
   * 设置基本路径。这是你GitHub仓库的slug。
   *
   * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
   */
  basePath: "/nextjs-github-pages",

  /**
   * 禁用基于服务器的图像优化。Next.js不支持
   * 静态导出的动态功能。
   *
   * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
   */
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

保存next.config.mjs
最后，在/public目录中放置一个.nojekyll文件，以禁止GitHub Pages尝试创建Jekyll网站。

.
├── app/
├── public/
│   └── .nojekyll
├── next.config.js

完美！这就是你需要配置Next.js以在GitHub Pages上部署的全部内容。

在`page.tsx`中添加基本路径

接下来，你需要在page.tsx文件中的图像添加基本路径。这是图像在GitHub Pages上显示所必需的。

打开app/page.tsx
找到Image组件
在src属性中添加/nextjs-github-pages/（或你GitHub仓库的slug）：

   <Image
     src="/nextjs-github-pages/vercel.svg"
     alt="Vercel Logo"
     className={styles.vercelLogo}
     width={100}
     height={24}
     priority
   />

保存page.tsx文件

通过阅读官方文档了解更多关于basePath和图像的信息。

配置GitHub仓库

接下来，你需要配置GitHub以通过GitHub Actions进行自动部署。

启用GitHub Pages

以下设置使用Github Action Deploy Pages进行部署。我更喜欢这个工作流程，因为你不需要生成SSH密钥或使用个人访问令牌。

转到你仓库的Settings标签
点击侧边栏中的"Pages"
在"Build and Deployment"下，选择"GitHub Actions"作为源：

github pages设置的截图

设置GitHub Action

这就是魔法发生的地方！这个工作流文件会在你推送到main分支时自动构建和部署应用。

创建.github/workflows/deploy.yml文件
粘贴https://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml的内容
保存deploy.yml文件

推送到GitHub

现在一切都配置好了，你可以提交你的代码并推送到GitHub。这将触发GitHub Action工作流程并将你的应用部署到GitHub Pages。

git add . && git commit -m "Initial commit" && git push

你应该在几分钟内看到你的网站部署到GitHub Pages。🚀

总结

感谢阅读，希望这对你有所帮助。如果你发现任何错误，请提交一个issue。祝你好运！🍻

nextjs-github-pages