Next.js使用getStaticProps后HTML页面源码无对应内容如何解决？

• 确认运行环境
  你当前如果是在npm run dev启动的开发模式下测试，Next.js开发模式为了支持热更新、快速调试，不会执行完整的静态预渲染流程，预渲染内容不会写入返回的HTML源码中。你需要执行npm run build构建生产包，再执行npm run start启动生产环境服务器，此时再查看页面源码就能看到预渲染的文本内容。
• 确认页面文件存放位置
  你使用的是Pages Router的getStaticProps语法，要求页面文件必须存放在项目根目录的pages文件夹下，首页对应pages/index.js。如果文件存放在其他目录（比如Next.js 13+的app目录），框架不会识别执行getStaticProps，页面会走客户端渲染，自然不会在源码中看到静态内容。
• 检查子组件实现逻辑
  检查你引用的MeetupList组件和Layout组件，是否存在客户端渲染的限制逻辑：比如组件内部用useEffect在客户端挂载后才渲染内容、或者用了typeof window !== 'undefined'的条件判断才返回列表内容、或者设置了初始loading状态在客户端水合后才关闭，这些逻辑都会导致预渲染阶段无法生成对应的文本内容。
• 确认Next.js版本兼容性
  如果你使用的是Next.js 13及以上版本，默认启用App Router，App Router不支持getStaticProps语法，如果要实现静态生成需要改用服务端组件、generateStaticParams等新特性，你可以在next.config.js中确认是否开启了Pages Router兼容，或者直接将页面迁移到pages目录下使用。

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