How to actually redirect to a 404 error page in getServerSideProps

[leo-petrucci]

Hi all,

I'm currently struggling with error pages, specifically 404 errors. At the moment if a page that does not exist in my application is requested, the user is directed to /pages/404.js, as they should.

However, if I have a catch-all route like /pages/posts/[slug].js, I am unable to show the same 404 page I mentioned above. I've looked all over but for some reason there seems to be absolutely no information on how to achieve this.

Resources I found that didn't help:

• Redirect to 404 page in getInitialProps()? #746
• https://linguinecode.com/post/how-to-redirect-on-the-server-side-with-next-js
• Redirect to 404 #10960
• Add a way to set the status code in getServerSideProps #11644

At the moment I'm able to return a 404 error, but this is displayed as the browser's default error which doesn't look very professional. This is the code for achieving that:

export const getServerSideProps = async ({ res }) => {
  res.statusCode = 404
  res.end();
  return {
    props: {
       error: 'oops'
    }
  };
};

Is there any way to both return a 404 state as well as showing a custom error page?