Javascript 使用Next JS和Commerce.JS获取产品permalink和ID

我想知道是否有人能给我指出正确的方向。我正在关注下一个JS站点上的动态路由文档-

目前我正在

products

页面上呈现所有产品。我正在使用

getServersideProps

进行API调用。以下是产品页面：

import Link from "next/link";

const Products = ({ data }) => {
  const products = data;
  return (
    <>
      {products.map(({ id, name, seo: { description } }) => (
        <div className="product" key={id}>
          <h2>{name}</h2>
          <p>{description}</p>
          <Link href={`/products/${permalink}`}>
            <a>View</a>
          </Link>
        </div>
      ))}
    </>
  );
};

export async function getServerSideProps() {
  const headers = {
    "X-Authorization": process.env.CHEC_API_KEY,
    Accept: "application/json",
    "Content-Type": "application/json",
  };
  const res = await fetch("https://api.chec.io/v1/products", {
    method: "GET",
    headers: headers,
  });
  const data = await res.json();

  if (!data) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: data, // will be passed to the page component as props
  };
}

export default Products;

当然，这只是用我可以访问的内容注销对象。查询显示[name]：“product name”，这很好-我现在可以调用所有产品并筛选与此slug匹配的产品，但我想改用product

id

。Commerce.js有一个请求，我可以使用它的

id

请求一个产品。我该怎么办

---

谢谢。

我想你的SSR会有问题，如果你想传递id并且只在URL中显示slug，如果没有人传递，SSR怎么知道你的id

您可以尝试类似的方法，但它只能在SPA模式下工作

<Link href={{ pathname: '/products' query: { prodId: id} }} as={permalink} />

我认为如果你想让SSR工作，你不能隐藏ID表单URL

编辑：

---

如果你想要一个改进SEO的解决方案，你可以有一个类似于

products/[…slug].js的结构，然后使用catch-all-your-path，就像
/products/342/product-name
是一个折衷方案，但它可以与SSR一起工作。
我认为你会遇到SSR的问题，如果你想传递id并且只在URL中显示slug，如果没有人传递它，SSR怎么知道你的id

您可以尝试类似的方法，但它只能在SPA模式下工作

<Link href={{ pathname: '/products' query: { prodId: id} }} as={permalink} />



我认为如果你想让SSR工作，你不能隐藏ID表单URL

编辑：

如果你想要一个改进SEO的解决方案，你可以有一个类似于
products/[…slug].js的结构，然后使用catch-all，你的路径就像
/products/342/product-name
是一个折衷方案，但它可以与SSR一起工作

<Link href={{ pathname: '/products' query: { prodId: id} }} as={permalink} />