使用next编写文档，发布到github上

最新推荐文章于 2025-08-10 16:00:43 发布

coder陈（996版）

最新推荐文章于 2025-08-10 16:00:43 发布

阅读量468

点赞数 4

CC 4.0 BY-SA版权

文章标签： github

本文链接：https://blog.csdn.net/b1asu/article/details/145687872

步骤 1：新建github仓库

部署站点到Github Pages需要先创建一个仓库：

例如：<xxxxx>.github.io

后缀名需要为 .github.io 。

步骤 2：next 文件配置

正确设置 package.json：

{
  ...

  "name": "xxxxx-docs-template",
  "version": "0.0.1",
  "homepage": "https://xxxxx.github.io",  // 根据自己修改
  "description": "xxxx docs template",

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy": "gh-pages -d out --dotfiles"
  }

  ...
}

dev：启动开发服务器进行本地开发。
build：构建生产环境的静态文件，成功后会生成一个 out 文件夹。
start：启动生产环境服务器。
deploy：将静态文件推送到 GitHub Pages 部署。

正确设置 next.config.js：

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

// Static Exports
let exportHtmlEnabled = true;

//
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,

  // disable source map
  productionBrowserSourceMaps: true,

  // !!! for docker (`output: 'standalone'`)
  // This will create a folder at .next/standalone which can then be deployed on its own without installing node_modules.

  output: !exportHtmlEnabled ? undefined : "export",

  // image optimize
  images: {
    unoptimized: true,
  },

  //  add a page route with html extension
  // Rename the file under pages directory to `.html.tsx`
  pageExtensions: ["html.jsx", "jsx", "js", "tsx", "ts", "mdx"],
  // omit the html extension
  trailingSlash: false,
  env: {
    exportHtml: `${exportHtmlEnabled}`,
  },
};

module.exports = withNextra(nextConfig);

步骤3：部署应用程序

步骤一：

你需要将打包出来的 out 文件夹下的所有内容，上传到你刚刚建好的仓库。（这里以我的为例），上传的时候会自动帮忙部署，Deployments为黄色时是在部署，绿色的时候才能正确访问已经修改重新上传过的。

步骤二：

访问文件是否正常，点击该网址访问网站是否正常

遇到的小问题

网上许多文档说打包的时候需要执行 npm run build 和 npm run export
当 next 版本比较高的时候，执行是会报错的
(Static)  prerendered as static content 
  ⨯ next export has been removed in favor of 'output: export' in next.config.js.
Learn more: https://nextjs.org/docs/app/building-your-application/deploying/static-exports
这个错误是因为在 Next.js 13 版本及更高版本中，next export 被移除，可以直接使用
npm run build
生成静态文件。

欢迎大家访问我的组件文档，给我组件提点小建议，共同进步