Next.js, redirect to 404 page inside getServerSideProps-CodePudding

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?

CodePudding user response：

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 notFound boolean allows the page to return a 404 status and 404 Page. With notFound: true, the page will return a 404 even 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],
    },
  };
}