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

Question

几天前，我遇到了Nextra，它是一个基于Next.js 的静态站点生成器。

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

据我了解，yarn build将创建一个包含 html、css 和 js 文件的文件夹，这些文件可以上传到 GitHub 页面。我走在正确的轨道上吗？Nextra 页面可以分别托管在 GitHub Pages 上吗？

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

提前感谢您的每条建议。

Answer 1

要生成静态文件而不需要 Node.js 服务器进行托管，您可以在构建后导出下一个应用程序。

在package.json：

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

然后yarn export您将获得文件夹中的文件out/。

使用基本的 Nextra 配置，您将收到有关图像优化的错误：

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

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

像这样：

// next.config.js

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

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

这是一个部署到 Github Pages 的工作示例。