[英]Get product permalink and ID using Next JS and Commerce.js
I'm wondering if anybody can point me in the right direction.我想知道是否有人能指出我正确的方向。 I'm following the dynamic routes documentation on Next JS site - https://nextjs.org/docs/routing/dynamic-routes
我正在关注 Next JS 站点上的动态路由文档 - https://nextjs.org/docs/routing/dynamic-routes
Currently I'm rendering all products on the products
page.目前我正在渲染
products
页面上的所有产品。 I'm using getServersideProps
to make the API call.我正在使用
getServersideProps
进行 API 调用。 Here is the products page:这是产品页面:
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;
In the Link I am using the permalink to direct people to a single product在链接中,我使用永久链接将人们引导至单个产品
<Link href={`/products/${permalink}`}>
<a>View</a>
</Link>
This is set up as products/[name].js
in the structure, with index.js
being the all products page.这在结构中设置为
products/[name].js
, index.js
是所有产品页面。
Now on my single product page, [name].js
I would like to run another getServersideProps
to call the API and get the product - but I want to use the product id
however I'd only like to display the permalink/slug
in the URL.现在,在我的单个产品页面
[name].js
上,我想运行另一个getServersideProps
来调用permalink/slug
并获取产品 - 但我想使用product id
,但我只想在URL。
Here is the [name].js
page:这是
[name].js
页面:
import { useRouter } from "next/router";
const Product = () => {
const router = useRouter();
console.log(router);
return <p></p>;
};
export default Product;
Of course this is just logging out the Object with what I can access.当然,这只是用我可以访问的方式注销 Object。 The query shows [name]: "product-name", which is great - I could now make a call for all products and filter the product the that matches this slug but I want to use the product
id
instead.查询显示 [name]: "product-name",这很好——我现在可以调用所有产品并过滤与此 slug 匹配的产品,但我想改用产品
id
。 Commerce.js has an request where I can request
a single product just by using its id
. Commerce.js 有一个请求,我可以仅通过使用它的
id
来request
单个产品。 How would I go about this?我怎么会go这个呢?
Thanks.谢谢。
I think you'll have a problem with SSR, if you want to pass the id and only show the slug in the URL how will SSR know of your ID if no one will be there to pass it?我想你会遇到 SSR 的问题,如果你想传递 id 并且只显示 URL 中的 slug,如果没有人在那里传递它,SSR 将如何知道你的 ID?
You can try something like this, but it will work only in SPA mode.您可以尝试这样的操作,但它只能在 SPA 模式下工作。
<Link href={{ pathname: '/products' query: { prodId: id} }} as={permalink} />
I think you can't hide the ID form URL if you want SSR to work.我认为如果你想让 SSR 工作,你不能隐藏 ID 表单 URL。
Edit:编辑:
If you want a workaround for improved SEO you could have a structure like products/[...slug].js
and then using the catch-all your path will be like /products/342/product-name
is a compromise but it will work with SSR.如果你想要一个改进 SEO 的解决方法,你可以有一个像
products/[...slug].js
这样的结构,然后使用 catch-all 你的路径就像/products/342/product-name
是一个妥协,但它会与SSR一起工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.