`在 Next.JS 的 `getStaticPaths` 中设置 `fallback: true` 时抛出新的错误('无法加载静态 props')`

Question

请参阅此处的讨论。我遇到了类似的错误。当

fallback

设置为

false

时，一切正常。然而，当fallback设置为true时，next js会抛出错误

 throw new Error('Failed to load static props')

Answer 1

经过大量的搜索和反复试验，我发现错误是因为里面抛出了异常

getStaticProps

。

为了解决这个问题，我所做的就是使用 try-catch 块。

export async function getStaticProps({ params }) {
  let data = null;
  try {
    data = await getData(params.slug);
  } catch (err) { };

  return {
    props: {
      data,
    },
  };

渲染时可以使用

if(props.data) return (<your-jsx-here></your-jsx-here>)
else return <div>Any message if you want</div>

Answer 2

我在这里找到了答案https://github.com/vercel/next.js/discussions/11862:

您的 getStaticProps 应返回类似

notFound: true

的布尔值，并且您的页面可以呈现 404 页面或

next/error

页面。这将使页面最终变得真实（如果丢失的 slug 是在后端创建的）。

Answer 3

以下是我如何使用

notFound: true

中的

getStaticProps

解决此问题。

export async function getStaticProps({ params: { id } }) {

  const res = await fetch(`{{api}}/items?id=${id}`);
  const item = await res.json();

  const notFound = item[0] ? false : true;

  return {
    props: {
      item: item[0]
    },
    revalidate: 10,
    notFound
  };
}