Next.js SSG页面部署Vercel时报错：未找到默认导出React组件

你的问题出在getStaticProps函数里——当data.status为false时，函数没有返回任何值。Next.js要求getStaticProps必须始终返回一个合法的对象（比如包含props的结构，或者notFound: true这类状态标识），如果存在分支未返回值，会导致构建流程异常，进而误报“未找到作为默认导出的React组件”。

修复代码 #

修改getStaticProps，补充接口返回失败分支的处理逻辑：

export const getStaticProps = async (context) => {
  const { params } = context;
  console.log("params", params);
  const { productId } = params;
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API}/api/v1/user/products/${productId}`,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  const data = await res.json();
  if (data.status) {
    return {
      props: {
        product: data.data,
      },
    };
  }
  // 补充失败分支的返回逻辑，告诉Next.js该页面不存在
  return {
    notFound: true
  };
};

为什么其他页面没问题？ #

其他页面的getStaticProps应该覆盖了所有分支的返回情况，所以构建时不会触发异常。而这个页面因为存在未返回值的分支，导致Next.js处理SSG逻辑时出现异常，最终抛出了看似和组件导出相关的错误。

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