Next.js getStaticProps 中如何优雅实现页面级错误处理？

核心报错根因 #

你之前碰到的JSON序列化报错，本质是getStaticProps的运行机制硬限制：所有通过props透传到页面的内容，必须是可以被完全JSON序列化的纯值类型（字符串、数字、普通对象、数组），不能直接传递Error实例、自定义类实例这类带方法/原型的对象，否则Next.js在构建静态资源时会直接抛出序列化错误。

可落地的实现方案 #

1. 无数据场景优先用内置notFound能力 #

Next.js 10.0.0+ 内置了notFound返回值支持：当getStaticProps内判断获取不到目标页面的有效数据（比如Strapi侧没有配置about页的内容），直接返回{ notFound: true }，框架会自动返回404状态码，匹配对应的404展示页，整个过程不会触发序列化问题。

2. 自定义错误展示时，手动构造可序列化的错误结构 #

如果需要在/about页直接展示自定义的无数据提示、附带对应错误statusCode，就绕开内置notFound逻辑，手动拆解错误字段再透传props：

• 不要直接抛出原始Error对象，也不要把原始Error实例放到props里
• 单独构造由纯字段组成的错误对象，把需要展示的statusCode、提示文案拆成数字、字符串类型的字段
• 参考实现逻辑：

// pages/about.js
export async function getStaticProps() {
  let pageProps = {}
  try {
    // 调用Strapi获取about页内容
    const strapiRes = await fetch(process.env.STRAPI_API_URL + '/about')
    if (!strapiRes.ok) {
      // 构造纯可序列化的错误结构
      pageProps = {
        error: {
          statusCode: strapiRes.status,
          message: '接口请求失败，暂时无法加载关于页内容'
        }
      }
    } else {
      const aboutData = await strapiRes.json()
      if (!aboutData) {
        pageProps = {
          error: {
            statusCode: 404,
            message: '关于页暂未配置有效内容'
          }
        }
      } else {
        pageProps = {
          aboutContent: aboutData
        }
      }
    }
  } catch (err) {
    // 仅提取需要的纯字段，不透传整个err对象
    pageProps = {
      error: {
        statusCode: 500,
        message: '网络异常，内容加载失败'
      }
    }
  }

  return {
    props: pageProps,
    revalidate: 60 // 配合ISR做静态内容的周期更新
  }
}

// 页面组件逻辑
export default function AboutPage({ aboutContent, error }) {
  if (error) {
    // 直接渲染错误提示，附带对应statusCode
    return (
      <div>
        <p>错误状态码：{error.statusCode}</p>
        <p>{error.message}</p>
      </div>
    )
  }
  // 正常渲染about页内容
  return <div>{/* about页正常内容 */}</div>
}

你调研的相关PR的适配性说明 #

你参考的相关PR，核心方向是尝试把服务端抛出的原始Error对象直接透传到页面层做处理，但因为违反了静态资源需要JSON序列化的硬限制，这个方案没有被合入正式版，也无法满足你自定义展示错误提示、附带状态码的需求。 #

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