Using this code to fetch a list of products, however I am receiving this error anytime I attempt to load a dynamic [product].js
route? Can't figure out what is going wrong as I have the same setup for 2 other dynamic routes with the pages being [photos].js
and [slug].js
and they load perfectly fine, I have even tried copying the code from those working pages and replacing album
or post
with product
to no avail.
I have double checked my Groq queries with sanity studio vision and they are returning the data that I need.
Any help would be greatly appreciated. Thank you, Mac.
[product].js
import sanity from 'sanity';
import DetailsPane from './details';
import ImagesPane from './images';
export const getStaticPaths = async () => {
const products = await sanity.fetch(`
*[_type == "product" && !(_id in path("drafts.**"))]{
slug{
current
}
}
`);
return products.map(({ slug }) => ({
params: { product: slug.current }
}));
};
export const getStaticProps = async ({ params }) => {
const product = await sanity.fetch(
`
*[slug.current == $product]{
name, description, category, images, in_stock, options, price, available_in
}
`,
{ product: params.product }
);
return {
props: {
product
}
};
};
const Product = ({ product }) => {
console.log(product);
return (
<div className="flex items-center justify-center space-x-4">
<DetailsPane {...product} />
<ImagesPane images={product.images} />
</div>
);
};
export default Product;
APPLICATION ERROR: A CLIENT-SIDE EXCEPTION HAS OCCURRED (SEE THE BROWSER CONSOLE FOR MORE INFORMATION).
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (logo-tote-bag, line 0)
I have just started using the pageExtensions
module from next, located here and forgot to add .page.js
to [product].js
.
Apologies.