Next.js含getServerSideProps页面构建导出报错解决方法

你遇到的问题由三个独立错误共同导致：

• package.json中export脚本存在无限递归：配置写的是"export": "npm run build && npm run export"，执行时会在build完成后反复调用自身，永远不会执行真正的静态导出逻辑，这是out目录为空的直接原因。
• 对Next.js渲染模式存在认知错误：标注为λ（使用getServerSideProps/getInitialProps）的服务端渲染页面，不支持next export静态导出。next export的作用是把页面提前构建为可直接托管的纯静态HTML文件，而服务端渲染页面需要Node.js运行时在用户发起请求时实时生成内容，无法提前导出为静态文件。
• 预渲染阶段React Hook调用报错：日志里的React #321错误是无效Hook调用，栈信息指向react-redux的Provider组件，本质是项目存在多份React实例、或者Redux上下文配置错误，导致预渲染时Hook找不到对应的React上下文。

1. 先确定你的部署模式 #

二选一，不要混着来：

• 如果你需要保留getServerSideProps做服务端渲染（比如页面数据需要实时获取、有根据请求头/cookie动态返回内容的逻辑）：不需要做任何静态导出，正确流程是执行npm run build完成构建后，线上执行npm run start启动Node服务即可。
• 如果你需要导出纯静态站点（比如托管到CDN、无Node服务的静态主机）：必须把所有页面的getServerSideProps全部替换为getStaticProps，动态路由页面（比如你的/[id]页）还要搭配getStaticPaths声明所有需要预渲染的路径，确保构建阶段就能拿到所有页面需要的数据。

2. 修正配置错误 #

首先修改package.json里的scripts，去掉递归问题：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "export": "next build && next export"
}

卸载全局安装的Next.js，避免全局依赖和项目本地依赖版本不一致导致多React实例问题，执行命令：

npm uninstall -g next

后续所有构建、启动、导出操作都通过npm script执行，不要直接调用全局的next命令。

3. 修复Redux配置问题 #

检查pages/_app.js文件，确保Redux Provider正确包裹所有路由，不要在Provider组件外层调用任何React Hook，参考正确写法：

import { Provider } from 'react-redux'
import store from '../your-store-path' // 替换为你项目中redux store的实际路径

export default function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

如果你自定义了.babelrc配置，删掉里面重复声明的react、react-dom相关预设，避免和Next.js内置的编译配置冲突。

4. 验证结果 #

• SSR模式：执行npm run build，构建日志里λ标识的服务端页面识别正常后，执行npm run start本地访问3000端口验证功能即可。
• 静态导出模式：完成所有页面getServerSideProps到getStaticProps的替换后，执行npm run export，构建完成后out目录会生成所有可直接托管的静态文件。

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