Next.js 13中getStaticProps未被调用问题求助

你遇到的问题核心是Next.js的App Router（app目录）不支持Pages Router（pages目录）的getStaticProps方法，这是两个路由系统的设计差异。

在App Router中，数据获取逻辑有了全新的实现方式，替代了旧的getStaticProps、getServerSideProps等API：

1. 静态生成（SSG）场景 #

如果你需要静态生成页面（类似原getStaticProps的作用），可以这么做：

• 直接在组件内用async/await获取数据（App Router默认组件是Server Components，支持异步操作）
• 用generateStaticParams方法生成动态路由的静态参数（对应原getStaticPaths的作用）

修改后的示例代码：

async function TagPage({ params, searchParams }) {
  // 这里直接写数据获取逻辑，替代getStaticProps
  const fetchedData = await fetch(`https://your-api.com/tags/${params.tag}`).then(res => res.json());
  
  console.log(params, searchParams, fetchedData);
  return <h1>hi</h1>;
}

// 生成需要静态预渲染的tag路由参数
export async function generateStaticParams() {
  // 示例：从数据源获取所有tag列表
  const tags = ['quotidien', 'tech', 'lifestyle'];
  return tags.map(tag => ({ tag }));
}

export default TagPage;

2. 其他数据获取场景 #

• 如果需要服务器端实时渲染数据，直接在Server Component里异步获取即可，无需额外方法
• 如果需要客户端侧数据获取，可以使用SWR或React Query这类库，在加了'use client'指令的Client Component中实现

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