getServerSideProps 未按预期工作问题求助（Next.js 15.1.6）

问题原因 #

• App Router不兼容getServerSideProps：Next.js 13及以后版本默认启用App Router（app/目录），而getServerSideProps是Pages Router（pages/目录）专属的数据获取API，放在App Router目录下的组件会直接忽略这个函数，导致props无法传递到组件中。
• 页面入口不符合规则：如果使用App Router，页面组件必须命名为page.js/page.tsx且放在对应路由的文件夹下，否则无法被正确识别，数据逻辑也会失效。

解决方案 #

方案1：切换到Pages Router #

1. 在项目根目录创建pages文件夹（若不存在）。
2. 将你的Movie组件文件移到pages文件夹下，比如命名为pages/movie.js。
3. 访问/movie路径，此时getServerSideProps会在服务器端执行，abc props会正常传递到组件中。

方案2：适配App Router的数据获取方式 #

如果想继续使用App Router，直接在服务器组件中编写异步数据逻辑（App Router默认支持服务器组件异步获取数据）：

// app/movie/page.js
async function Movie() {
  // 原getServerSideProps中的逻辑直接在这里编写
  const abc = '123';
  console.log(abc);

  return (
    <>
      <h1>{abc || 'not found'}</h1>
    </>
  );
}

export default Movie;

验证步骤 #

1. 确认组件所在目录：检查你的Movie组件是在app/还是pages/下。
2. 若使用App Router，确保页面组件命名为page.js/page.tsx，且位于对应路由的文件夹中。
3. 重启开发服务器，重新访问页面查看效果。

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