如何干净地处理 nextjs getStaticProps 中的错误

Question

我现在非常忙于构建我的第一个 Next.JS 应用程序（Next 和 Strapi）。 现在一切正常，但我很好奇在使用 getStaticProps 时实现错误处理的最佳方法是什么。

我自己尝试了一些事情（传递多个道具等，但都没有奏效（典型的非序列化 JSON 错误）。我想要实现的是页面本身（例如/about）上的错误消息，没有找到数据. 附有错误消息（statusCode）。

我希望它可能，我做了很多研究并发现： https://github.com/vercel/next.js/pull/17755这个。 但它不完全是我正在寻找的。

谢谢你。 贾斯蒂安·斯派克博施

Answer 1

您可以创建自定义 404 和 500 错误页面。 有一个显示statusCode的选项，但是您可以通过在getStaticProps中返回notfound: true来告诉 Next 使用 404 页面。

如果返回notfound: true ，statusCode 将始终显示 404 页面，并且您知道状态码将为 404。

这是在getStaticProps中捕获错误的示例 - 这将生成您的页面或显示根据您的规范设计的自定义错误页面。

export const getStaticProps = async () => {
  try {
    const { data, errors } = await someQuery();
    if (errors || !data) {
      return { notFound: true };
    }
    return { props: { data } };
  } catch () {
    return { notFound: true };
  }
};