Update:
- Why is this error occurring due to [category_slug]-index.js using
getServerSideProps? - I attempted creating an index.js under the product folder, and it seems to work fine with [category_slug] using
getServerSideProps, am I correct?
This is how my folder structure looks like
pages
|-categories
|-[category_slug]
|-index.js
|-product
|-[product_slug].js
An error occurs when I navigate to [product_slug]. It displays:
Error: A required parameter (category_slug) was not provided as a string in getStaticPaths for /categories/[category_slug]/product/[product_slug]
Is it possible to have nested routing folders in Next.js? I couldn't find any information on this.
Here's the code snippet for reference
// [product_slug].js
export async function getStaticProps({ params: { product_slug } }) {
const product_res = await fetch(
`${API_URL}/products/?product_slug=${product_slug}`
);
const found = await product_res.json();
return {
props: {
product: found[0],
}
};
}
export async function getStaticPaths() {
// Retrieve all possible paths
const products_res = await fetch(`${API_URL}/products/`);
const products = await products_res.json();
return {
paths: products.map((product) => ({
params: { product_slug: product.product_slug },
}),
fallback: false,
};
}
I experimented with providing a hardcoded value to [category_slug]. Is this the correct approach or not? The documentation doesn't clarify on this matter.
export async function getStaticProps({ params: { product_slug } }) {
const product_res = await fetch(
`${API_URL}/products/?product_slug=orange_juice`
);
const found = await product_res.json();
return {
props: {
product: found[0],
},
};
}
export async function getStaticPaths() {
// Retrieve all possible paths
const products_res = await fetch(`${API_URL}/products/`);
const products = await products_res.json();
return {
paths: [
{
params: {
product_slug:
"categories/orange/product/orange_juice",
},
},
],
fallback: false,
};
}
Can someone guide on the correct method to input the first dynamic path in [product_slug] dynamic route?