Next.js中getStaticProps返回值为undefined的问题求助

问题说明 #

在Next.js项目中，无论从GraphQL接口获取数据还是直接声明常量返回，getStaticProps传递给组件的course始终为undefined，但相同代码在另一个Next.js项目可正常运行，怀疑getStaticProps有变更。

排查与解决步骤 #

1. 检查Next.js版本差异 #

• 运行npm list next查看当前项目和正常项目的版本号。
• 若当前项目使用App Router（Next.js 13+），getStaticProps仅在Pages Router的pages目录下有效，App Router需改用generateStaticParams或Server Components获取数据；若需保留getStaticProps，将组件移至pages目录。
• 若版本差异较大，参考官方文档确认对应版本的getStaticProps使用规则。

2. 确认文件位置合规 #

• getStaticProps仅在pages目录下的页面组件中生效，放在components目录或App Router的app目录下不会被执行。
• 检查当前组件文件是否在pages目录中，若不在则移至该目录重试。

3. 验证导出方式正确性 #

• 确保页面组件是默认导出，getStaticProps是命名导出，避免混淆导出方式。
• 检查代码中是否存在多个默认导出，或getStaticProps被错误嵌套在组件内部。

4. 调试getStaticProps执行状态 #

• 在getStaticProps内部添加日志，确认函数是否执行及返回值是否正确：

  export const getStaticProps = async () => {
    console.log("getStaticProps 已执行");
    const course = "Mathematics";
    console.log("返回的props:", { course });
    return {
      props: {
        course,
      }
    };
  };
  

• 若控制台未输出日志，说明函数未被调用，需重新检查文件位置或Next.js配置。

5. 排查Next.js配置干扰 #

• 查看next.config.js中是否有自定义路由、实验性功能等特殊配置，临时移除非必要配置后重启服务器测试。

6. 清除缓存并重启服务 #

• 运行next build重新构建项目，清除Next.js缓存。
• 重启next dev开发服务器，避免缓存导致的异常。

内容的提问来源于stack exchange，提问作者Ayo Niyi