问题描述
我正在制作 Next.JS 静态电子商务网站。
我有一个单独的产品页面的 /products/[id]
路径,所以在 [id].js
文件中我有 getStaticPaths 函数,它为我的所有产品创建页面。所以没关系。
现在我正在为我的产品(如裤子、T 恤等)制作系列,所以我做了 /categories/[category]
路径。在 [category].js
中,我想显示特定系列的所有产品。
现在是一个问题! [category.js] 中静态呈现的产品是否需要 getStaticPaths 函数,或者我可以在 getStaticProps 中获取它们并在页面上使用?
首先我调用 getStaticPaths 为每个集合(类别)生成单独的页面:
export async function getStaticPaths() {
await dbConnect()
const categories = await CategoryModel.find({})
const paths = categories.map((doc) => {
const category = doc.toObject()
return {
// !!! categories finds by name (not slug or id)
params: { category: category.name }
}
})
此外,我使用 getStaticProps 来获取特定的集合(类别)和产品。
export async function getStaticProps({ params }) {
await dbConnect()
const category = await CategoryModel.findOne({ name: params.category }).lean()
category._id = category._id.toString()
const productsData = await ProductModel.find({categories: `/${params.category}`})
const products = productsData.map((doc) => {
const product = doc.toObject()
product._id = product._id.toString()
return product
})
// revalidate set the time (in sec) of re-generate page (it imitate SSR)
return { props: { category,products },revalidate: 120 }
}
所以这里我没有对产品使用 getStaticPaths,因为我在 products/[id].js
中创建了它们。方法正确吗?
提前致谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)