Return a 404 from a Next.js page render method (ssr + client-side)

render404Error.ts

import React from 'react';
import ErrorPage from 'next/error';

// Allow to render the error page + return the correct error code with SSR
// It is a hack and has the disadvantage of logging this server-side
// https://github.com/zeit/next.js/issues/4451
// A better solution is welcome.

export const render404Error = () => {
  if (process.browser) {
    return <ErrorPage statusCode={404} />;
  }

  const error = new Error('404 triggered');
  // @ts-ignore necessary to return a 404
  // https://github.com/zeit/next.js/issues/3452#issuecomment-436749130
  error.code = 'ENOENT';
  throw error;
};