使用 Next JS 和 Commerce.js 获取产品固定链接和 ID

Question

我想知道是否有人可以指出正确的方向。我正在关注 Next JS 站点上的动态路由文档 - https://nextjs.org/docs/routing/dynamic-routes

目前我正在渲染 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;

在 Link 中，我使用永久链接将人们引导至单个产品

<Link href={`/products/${permalink}`}>
            <a>View</a>
          </Link>

这在结构中设置为products/[name].js，index.js是所有产品页面。

现在在我的单个产品页面上，[name].js 我想运行另一个 getServersideProps 调用 API 并获取产品 - 但我想使用product id 但是我只想在 URL.

中显示 permalink/slug

这是 [name].js 页面：

import { useRouter } from "next/router";

const Product = () => {
  const router = useRouter();
  console.log(router);

  return <p></p>;
};

export default Product;

当然这只是注销我可以访问的对象。查询显示 [name]: "product-name"，这很棒 - 我现在可以调用所有产品并过滤与此 slug 匹配的产品，但我想改用产品 id。 Commerce.js 有一个请求，我可以 request 一个单一的产品，只需使用它的 id。我该怎么做？

谢谢。

Answer 1

我想你的 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 一起使用.

使用 Next JS 和 Commerce.js 获取产品固定链接和 ID

Get product permalink and ID using Next JS and Commerce.js

javascript

e-commerce

reactjs

next.js

next-router