Next.js 13中getServerSideProps报错及URL参数id未定义求助

你的问题核心是Next.js 13的App Router（app目录）不兼容Pages Router的getServerSideProps API，同时动态路由参数的获取方式也和旧版本不同，导致报错和id参数无法获取。

问题原因 #

Next.js 13推出的App Router彻底重构了数据获取逻辑，getServerSideProps、getStaticProps这类Pages Router的专属导出不再被支持，所以你会收到"getServerSideProps" is not a valid Next.js entry export value的报错；同时旧的props传参逻辑失效，导致组件中的id始终为undefined。

修正后的代码 #

直接在页面组件中通过params获取动态路由参数，App Router默认支持服务端组件异步数据获取，无需额外导出函数：

// app/detail/[id]/page.tsx
export default async function DetailThemepage({ params }: { params: { id: string } }) {
  const { id } = params;
  console.log("ID OF THE PAGE:" + id); // 现在能正确输出xyz

  // 如需服务端数据获取，直接在这里写异步逻辑即可
  // 示例：const themeData = await fetch(`/api/themes/${id}`).then(res => res.json());

  return (
    <div>当前主题ID：{id}</div>
  );
}

关键说明 #

• 动态路由的参数会被封装到params对象中，键名对应你路由目录的[id]，直接解构即可拿到值
• App Router的页面组件默认是服务端组件，可以直接写async/await逻辑进行数据获取，替代了原来getServerSideProps的作用
• 必须移除原来的getServerSideProps导出，才能消除报错

内容的提问来源于stack exchange，提问作者Captai-N