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

Question

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

我自己尝试了一些东西（传递多个道具等，但都不起作用（典型的未序列化 JSON 错误）。我想要实现的是页面本身上的错误消息（例如 /about），没有找到数据. 附有错误消息 (statusCode)。

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

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

Answer 1

您可以创建自定义 404 和 500 错误页面。还有就是要显示的选项的StatusCode但是，你能告诉下通过返回使用404页notfound: true在getStaticProps。

如果您返回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 };
  }
};