Next.js 13 App Router使用getServerSideProps时Props未定义错误

核心原因 #

Next.js 13的App Router完全弃用了Pages Router的getServerSideProps、getStaticProps等数据获取API，你在App Router目录下的page.tsx里使用getServerSideProps不会生效，自然无法传递props，才会出现props.json为undefined的错误。

正确实现方式 #

App Router中，Server Component（默认所有app目录下的组件都是Server Component，无需额外声明）可以直接通过async/await在组件内部获取数据，无需依赖旧的API。

修改后的代码如下：

// src/app/parts/test/page.tsx
interface Product {
  id: number;
  title: string;
  // 可根据需要添加其他字段
}

interface ProductsResponse {
  products: Product[];
}

async function Page() {
  try {
    // 若需要类似getServerSideProps的动态请求（每次请求都获取最新数据），添加cache: 'no-store'
    const res = await fetch('https://dummyjson.com/products', { cache: 'no-store' });
    if (!res.ok) {
      throw new Error('Failed to fetch products');
    }
    const data: ProductsResponse = await res.json();
    
    return (
      <>
        {data.products.map((item) => (
          <p key={item.id}>{item.title}</p>
        ))}
      </>
    );
  } catch (error) {
    console.error('Error fetching data:', error);
    return <p>Failed to load products</p>;
  }
}

export default Page;

关键说明 #

• Server Component特性：App Router下的page.tsx默认是Server Component，支持直接在组件顶层使用async/await，数据会在服务器端获取后再渲染页面。
• 请求缓存控制：如果需要实现getServerSideProps那种每次请求都重新获取数据的效果，要给fetch添加{ cache: 'no-store' }配置；如果允许缓存数据，可省略该配置（默认缓存策略）。
• 类型优化：将object[]改为具体的Product类型，提升代码可读性和类型安全性。

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