I am facing an issue on my dynamic page where the external server returns a 404 error if the requested product is not found. However, when using getServerSideProps, instead of redirecting to a 404 page, it shows a blank page.
Below is the code snippet:
// pages/[slug].tsx
export const getServerSideProps: GetServerSideProps = async ({
params,
res,
}) => {
const { product, relatedProducts } = await getProductDetail(
params?.slug as string
);
if (res.statusCode === 404) {
return {
redirect: { destination: "/404", permanent: false },
};
}
return {
props: {
product,
relatedProducts,
},
};
};
I also tried using the notFound property:
if (res.statusCode === 404) {
return {
notFound: true
};
}
This issue is new to me as server redirection was working fine on other (static) pages. Any help would be highly appreciated.