在Next.js 13中如何结合Context实现getServerSideProps功能

Next.js 13主推的App Router采用了服务器组件默认机制，相比旧版的getServerSideProps，实现方式更简洁直接。以下分两种路由方案给出实现：

App Router 实现方式（推荐） #

App Router下所有组件默认是服务器组件，无需额外配置即可完成服务器端渲染。根据参数传递方式不同，有两种获取方式：

1. 动态路由参数（如 /products/123） #

若路由定义为app/products/[itemid]/page.js，可通过组件的params参数直接获取动态路由值：

// app/products/[itemid]/page.js
async function ProductPage({ params }) {
  // params.itemid 对应路由中的动态值
  const res = await fetch(`https://fakestoreapi.com/products/${params.itemid}`);
  const product = await res.json();

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

2. URL查询参数（如 /products?itemid=123） #

若参数通过URL查询字符串传递，使用组件的searchParams参数获取：

// app/products/page.js
async function ProductsPage({ searchParams }) {
  const itemId = searchParams.itemid;
  if (!itemId) {
    return <div>请提供商品ID</div>;
  }

  const res = await fetch(`https://fakestoreapi.com/products/${itemId}`);
  const product = await res.json();

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductsPage;

Pages Router 兼容写法 #

如果仍在使用旧版Pages Router，Next.js 13依然完全兼容getServerSideProps，你的原有代码可以直接沿用，仅需补充组件渲染逻辑：

// pages/products/[itemid].js 或 pages/products.js
export async function getServerSideProps(context) {
  const { query } = context;
  const res = await fetch(`https://fakestoreapi.com/products/${query.itemid}`);
  const product = await res.json();

  return {
    props: { product },
  };
}

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

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