在GitHub Pages上托管Nextra（Next.js静态网站生成器）网站

Question

最近我发现了一个基于Next.js的静态网站生成器Nextra。

文档解释了如何将网站部署到Vercel，我想知道是否可以将网站部署到GitHub Pages或任何其他托管静态HTML站点的平台。

从我的理解来看，yarn build会创建包含html、css和js文件的文件夹，可以上传到GitHub Pages。我是不是这么做就可以了？同样地，能否在GitHub Pages上托管Nextra页面？

我找不到包含生成的网站或类似内容的build文件夹。

非常感谢您提前的建议。

- Philipp

---

你需要运行 next export 命令将你的应用程序导出为 静态 HTML。 - juliomalves

谢谢您的提示。我遇到了错误：使用Next.js默认加载器进行图像优化与next export不兼容。但这似乎是正确的方向。 - Philipp

Answer 1

为了生成不需要Node.js服务器托管的静态文件，您可以在构建之后导出您的Next应用程序。

在package.json中：

  "scripts": {
    "export": "next build && next export"
  }

然后运行 yarn export 命令，你将会在 out/ 文件夹中得到文件。

使用基本的 Nextra 配置时，你会遇到关于图像优化的错误：

错误：使用 Next.js 默认加载器进行图像优化与 next export 不兼容。

为了避免该错误，你应该通过提供 images.unoptimized 选项在 require("nextra")({}) 之外来停用 Next.js 的图像优化。

像这样：

// next.config.js

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = {
  ...withNextra(),
  images: {
    unoptimized: true,
  },
};

这里有一个在Github Pages上部署的工作示例。

- Roman Mkrtchian

---

非常有帮助，谢谢！ - Subfuzion