从getStaticPaths返回两个值

Question

我正在使用getStaticPaths在NextJS中创建一个产品页面。我的产品来自wooCommerce，问题是：

我想使用"；permalink"；对于我的NextJS路由URL，但我需要product.id来获取正在渲染的特定产品的数据。

我的代码看起来像这样：

export async function getStaticPaths() {
const res = await fetch('https://.../products/')
const products = await res.json()
const paths = products.map((product) => ({
params: { permalink: product.slug, id: product.id},
}))
return { paths, fallback: false }
}

export async function getStaticProps({params}) {
console.log(params);
const res = await fetch(`https://.../products/${params.id}`)
const productsData = await res.json()

return { props: { productsData } }
}

我试图在params中传递id，但NextJS只需要JS文件名中的变量(在本例中为[permalink].JS(，因此id不会传递给getStaticProps，并且我需要id来获取产品数据，因为API无法使用permalink。

是否有任何方法可以将另一个变量(在本例中为ID(从getStaticPaths传递到getStaticProps

Answer 1

export async function getStaticPaths() {
const res = await fetch('https://.../products/')
const products = await res.json()
let paths = []

for (const product of products){
paths.push({params: {permalink: product.slug }, id: product.your_map_id})
}
return { paths, fallback: false }
}

Answer 2

您需要创建一个嵌套的动态路由。page/[permalink]/[id].js