I'm having a problem in my nextjs app (13.0.5)
When navigating through the website, product, seller and sellerProducts are undefined except I refresh the page...
Ive tried fetching iit in the client with a useeffect, but I need this to work.
I have the same logic in other projects and they work fine...
I don't understand what is going on... Any help? Thanks!
dir: /product/[slug].tsx
const ProductPage = ({
product,
seller,
}: {
product: Product;
seller: Seller;
}) => {
const { user, updateUser } = useUser();
console.log(seller, product);
if (!product || !seller) {
return (
<PageLayout>
<p className="animate-pulse">Cargando...</p>
</PageLayout>
);
}
return (
<PageLayout>
<div className="contain flex flex-col">
<ProductBody
product={product}
seller={seller}
isActive={user.id === seller.id}
/>
</div>
</PageLayout>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
//logic here
return { paths: allPaths, fallback: false };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const productId = params?.slug;
if (!productId) {
return { props: { product: null, user: null } };
}
const { data: product, error } = await supabase
.from("products")
.select("seller, id, published_version, created_at, published")
.eq("id", productId)
.eq("published", true)
.single();
console.log("RESULTADOS", product, error);
if (error || !product) {
return { props: { product: null } };
}
if (!product || !product.seller) {
return { notFound: true }; // Return notFound: true when the product doesn't exist
}
const { data: seller, error: sellerError } = await supabase
.from("users")
.select("*")
.eq("id", product.seller)
.single();
if (sellerError || !seller) {
return { notFound: true };
}
return {
props: {
product,
seller,
},
revalidate: 1,
};
};
export default ProductPage;