Next.js中getServerSideProps失效问题排查求助

核心原因 #

Next.js 13+ 引入的 App Router（app/ 目录下的页面）不支持 getServerSideProps、getStaticProps 这类 Pages Router（pages/ 目录）专属的数据获取API，你的代码写在 app/page.js 里，自然不会触发这些方法。

解决办法 #

方法1：适配App Router的异步数据获取方式

App Router默认使用服务器组件，允许直接在组件内部写异步逻辑获取数据，修改代码如下：

export default async function Home() {
  // 直接在组件内编写异步数据获取逻辑，替代getServerSideProps
  console.log('test');
  const data = 'test';
  
  return (
    <main>
      <h1>{data}</h1>
    </main>
  )
}

方法2：改用Pages Router

如果想继续使用getServerSideProps，把页面文件移到pages/目录下（命名为pages/index.js），原有代码无需修改即可正常运行。

额外验证 #

确认你的Next.js版本是13及以上，且项目采用了App Router目录结构（存在app/目录），这是导致问题的前提。

内容的提问来源于stack exchange，提问作者Kasper Östberg