Next.js 12+ 静态站点生成(SSG)构建未输出预渲染纯HTML问题咨询

1 优先确认预渲染判断方式 #

你需要通过右键查看页面源代码的方式确认HTML内容，不要使用浏览器开发者工具的Elements面板，Elements面板展示的是客户端执行JS后的最终DOM结构，无法判断静态预渲染是否生效。

2 排查客户端渲染逻辑 #

• 检查pages/about.tsx是否使用了next/dynamic导入组件并设置ssr: false，该配置会跳过服务端预渲染，导致生成的HTML只有JS占位符
• 检查根组件_app.tsx、_document.tsx是否存在客户端判断逻辑（如if (typeof window !== 'undefined')），导致服务端渲染时未输出子组件内容
• 检查是否使用了Suspense、React.lazy等客户端特性包裹了页面根节点

3 修正next.config.js配置 #

Next.js 12的静态导出已支持自动识别pages目录下的静态路由，无需手动配置exportPathMap，你可以简化配置如下：

module.exports = {
  reactStrictMode: true,
  // 如果需要全局移除客户端JS，可开启该配置（也可单页面配置）
  // unstable_runtimeJS: false
}

4 单页面输出纯HTML（完全无冗余JS） #

如果你的About页面不需要任何客户端交互，可直接在about.tsx中添加页面级配置，完全移除JS引用，输出纯静态HTML：

// pages/about.tsx 顶部添加页面配置
export const config = {
  unstable_runtimeJS: false
}

// 页面组件正常编写即可
export default function About() {
  return <div>
    <h1>关于页面</h1>
    <h2>页面内容</h2>
  </div>
}

// 无动态内容时getStaticProps可省略，保留的话需正确返回props对象
export async function getStaticProps() {
  return {
    props: {}
  }
}

5 重新构建验证 #

修改完成后执行构建命令：
npm run build
生成的out/about/index.html中即可直接看到<h1>、<h2>等实际HTML标签，无冗余JS引用和JSON载荷。

内容的提问来源于stack exchange，提问作者user61307