本文介绍了如何干净地处理nextjs getStaticProps中的错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我现在正忙于构建我的第一个Next.JS应用程序(Next和Strapi)。现在一切都正常了，但我很好奇在使用getStaticProps时实现错误处理的最佳方式是什么。
我自己尝试了一些方法(传递多个道具等)，但都不起作用(典型的非序列化JSON错误)。我想要实现的是页面本身上的一条错误消息(例如/About)，指出没有找到数据。附加了错误消息(StatusCode)。
我希望这是可能的，我做了很多研究，发现：https://github.com/vercel/next.js/pull/17755这个。但这不是我想要的。
推荐答案
可以创建custom 404 and 500 error pages。有一个选项可以显示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 };
}
};
notFound的另一个不太明显的用例是使用它从生产环境中排除目录或页面。下面的检查将在NEXT/EXPORT(SSG)期间跳过整个页面或目录。此检查用于生成仅用于开发的静态页面。
如果目录中的单个页面具有下面的复选标记，则在构建过程中将跳过该页面。如果目录中的每一页都有复选标记，则将跳过整个目录，包括该文件夹。
export const getStaticProps = async () => {
if (process.env.NODE_ENV === 'production') {
return { notFound: true };
}
...
};
确保不包括您不想在getStaticPaths中构建的路线。
这篇关于如何干净地处理nextjs getStaticProps中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！