Next.js中使用getStaticProps遇ts(1184)错误，放置位置存疑

你遇到的问题核心是混淆了Next.js不同路由体系的API规范：

• 如果你用的是传统的Pages Router（页面文件放在pages/目录下），getStaticProps必须是顶层导出函数，绝对不能嵌套在组件函数内部——这就是你把它移到组件外就正常的原因。
• 而文档里说“放在组件内部”的场景，是针对App Router（app/目录下的组件）的：Next.js 13+的App Router已经废弃了getStaticProps这类旧API，改为直接在Server Component里用async/await写数据获取逻辑，不需要单独的getStaticProps函数。

对应解决方式 #

1. 确认你的路由体系：
   • 项目有pages/目录？那就是Pages Router，必须按下面的方式写：

     // pages/xxx.js
     // 顶层导出getStaticProps，不能放组件里
     export async function getStaticProps() {
       const data = await fetch('目标接口地址')
       return { props: { data } }
     }
     
     // 组件函数
     export default function YourPage(props) {
       return <div>{props.data}</div>
     }
     

2. 要是你是看了App Router的文档，但实际用的是Pages Router，要么按上面的Pages规则写，要么迁移到app/目录用新写法：

   // app/xxx/page.js
   async function YourPage() {
     // 直接在组件内异步拿数据
     const data = await fetch('目标接口地址')
     return <div>{data}</div>
   }
   
   export default YourPage
   

之前你把getStaticProps移到组件外能正常运行，完全符合Pages Router的要求，说明你看的文档和当前项目的路由体系不匹配，才导致了困惑。

内容的提问来源于stack exchange，提问作者erff-on