如何读取Next.js静态生成的HTML文件及相关疑问解答

执行npm run build后，你会在.next/server/pages目录下找到Next.js静态生成的HTML文件，但这些文件大多只有script标签和JSON数据，示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect" href="/" crossorigin="anonymous" />
    <link
      rel="preload"
      href="/_next/static/css/123.css"
      as="style"
    />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <link
      rel="stylesheet"
      href="/_next/static/css/afe06a54dae95702.css"
      data-n-g=""
    />
    <noscript data-n-css=""></noscript>
    <script
      defer=""
      nomodule=""
      src="/_next/static/chunks/polyfills-123.js"
    ></script>
    <script
      src="/_next/static/chunks/webpack-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/framework-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/main-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/pages/_app-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/pages/demo-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/123/_buildManifest.js"
      defer=""
    ></script>
    <script
      src="/_next/static/123/_ssgManifest.js"
      defer=""
    ></script>
  </head>
  <body>
    <div id="__next"></div>
    <script id="__NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/demo",
        "query": {},
        "buildId": "123",
        "nextExport": true,
        "autoExport": true,
        "isFallback": false,
        "scriptLoader": []
      }
    </script>
  </body>
</html>

为什么生成的不是纯HTML？ #

这是因为Next.js基于React构建，核心采用**客户端水合（Hydration）**机制：

• 静态生成时，Next.js只会输出页面的"骨架"HTML，包含页面所需的资源链接（CSS、JS）和预取的页面数据（存在__NEXT_DATA__脚本中），不会直接渲染出页面的完整内容。
• 这种设计是为了兼顾静态站点的加载速度和React应用的交互性：骨架HTML能让浏览器快速渲染出基础页面结构，客户端JS则负责把数据转换成可交互的React组件。

浏览器会做后续处理转换成完整HTML吗？ #

会的，具体流程如下：

1. 浏览器加载并解析骨架HTML，创建基础DOM结构（此时#__next容器是空的）。
2. 加载并执行页面中标记为defer的脚本，包括React、Next.js框架代码和你的页面组件代码。
3. 脚本读取__NEXT_DATA__中的JSON数据，将其作为props传入对应的页面组件。
4. React完成客户端水合过程，把组件渲染成真实DOM并注入到#__next容器中，最终形成完整的可交互页面。

怎么获取最终的HTML输出？ #

有几种常用方法：

• 浏览器开发者工具：打开目标页面，等页面完全加载（水合完成）后，在Elements面板右键选择「复制」→「复制 outer HTML」，就能拿到包含完整内容的HTML；也可以直接复制#__next容器内的DOM内容。
• 无头浏览器脚本：用Puppeteer这类工具模拟浏览器加载页面，等待水合完成后抓取HTML。示例脚本如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 替换为你的页面地址
  await page.goto('http://localhost:3000/demo', { waitUntil: 'networkidle2' });
  const finalHTML = await page.content();
  console.log(finalHTML);
  await browser.close();
})();

• 静态导出完整HTML：如果你的页面不需要客户端交互，或希望直接生成纯静态HTML，确保页面使用了getStaticProps预取数据，然后执行next export命令，Next.js会把预渲染好的完整HTML输出到out目录中。

内容的提问来源于stack exchange，提问作者utg.tdawg