Currently, I'm utilizing getStaticPaths method to establish a product page in NextJS framework. My products are retrieved from wooCommerce; however, there's an issue:
I intend to utilize "permalink" for the URL of my NextJS route, but at the same time, I require the product ID to fetch data related to that specific product being displayed.
The structure of my code is somewhat similar to this:
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 } }
}
I am attempting to transfer the ID through params, yet NextJS only anticipates variables present in the JavaScript filename (in this scenario, [permalink].js); hence, the ID is not transferred to getStaticProps, and I necessitate the ID to retrieve product data as the API does not cooperate with permalinks.
Is there a potential way to transmit another variable (such as ID in this context) from getStaticPaths to getStaticProps?