I am looking for a best practice in a server-side rendered page on handling an HTTP 404 if the requested page does not have an underlying server-side resource.
For example, let's assume the page requested is http://localhost:3000/places/5. In my SSG implementation:
export async function getServerSideProps(context) {
const placeId = context.params.placeId;
const places = await getPlace(placeId);
if (!places.length) { /* is there anything here I can do to facilitate a 404? this place does not exist in the db */ }
return {
props: {
places[0],
},
};
}
Should be self-explanatory but if the requested id, in this case 5 is not a place that's in my DB, how do I handle this as an HTTP 404?
You can do that by returning an object like below, with notFound: true. And it would redirect to 404 page if your Next.js version is greater than v10.
The
notFoundboolean allows the page to return a404status and404Page. WithnotFound: true, the page will return a404even if there was a successfully generated page before. More here on Next.js's offical documentation.
export async function getServerSideProps(context) {
const placeId = context.params.placeId;
const places = await getPlace(placeId);
if (!places.length) {
return {
notFound: true,
}
}
return {
props: {
places[0],
},
};
}