如何修复NextJS构建时404与500页面的报错问题？

问题根源 #

你同时在pages目录下放置了全局错误页面_errors.tsx和单独的404.tsx、500.tsx，这在NextJS的Page Router体系中会触发预渲染冲突——NextJS会尝试同时处理全局错误组件与独立错误页面，进而导致构建失败。

解决方案 #

方案1：保留独立错误页面，移除全局错误组件 #

直接删除pages/_errors.tsx文件，仅保留404.tsx和500.tsx。NextJS会自动识别这两个独立错误页面，处理对应的404、500场景，构建时不会再出现预渲染错误。

你的404.tsx和500.tsx代码已是极简可用版本，无需额外修改。

方案2：保留全局错误组件，移除独立错误页面 #

删除pages/404.tsx和pages/500.tsx，在_errors.tsx中根据statusCode渲染对应内容，统一处理所有错误场景：

function Error({ statusCode }: any) {
  if (statusCode === 404) {
    return <h1>404</h1>;
  }
  if (statusCode === 500) {
    return <h1>500</h1>;
  }
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}

Error.getInitialProps = ({ res, err }: any) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

修改后执行npm run build即可完成构建。

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