getStaticPropsやgetServerPropsなどでデータが取れなかった場合や、任意のエラーを表示させたい場合、next/errorを使うとよさそうでした。

import DefaultErrorPage from 'next/error'

export default function Home() {
  return (
    <DefaultErrorPage statusCode={404} />
  )
}

• 

• 

メッセージ表示は一部のみ

HTTP 400 / 404 / 405 / 500以外のステータスコードを投げ込むと、「An unexpected error has occurred」扱いされます。

const statusCodes: { [code: number]: string } = {
  400: 'Bad Request',
  404: 'This page could not be found',
  405: 'Method Not Allowed',
  500: 'Internal Server Error',
}
...
    const title =
      this.props.title ||
      statusCodes[statusCode] ||
      'An unexpected error has occurred'
// https://github.com/vercel/next.js/blob/canary/packages/next/pages/_error.tsx#L5-L10

ほかのエラーを使いたい場合は、titleプロパティを使うようにしましょう。

export default function Home() {
  return (
    <DefaultErrorPage statusCode={418} title="I'm a teapot"/>
  )
}

(SSGでは不可) HTTP status codeも返す

SSG(next export)では使えないので要注意です。

上記のエラーComponentを返しても、HTTP上は200が返ります。

ステータスコードも返したい場合は、getServerSidePropsを使いましょう。

import DefaultErrorPage from 'next/error'
import { GetServerSideProps } from 'next'

export default function Home({statusCode, statusMessage}) {
  return (
    <DefaultErrorPage statusCode={statusCode} title={statusMessage}/>
  )
}
export const getServerSideProps: GetServerSideProps = async (context) => {
  context.res.statusCode = 418
  context.res.statusMessage = "I'm a teapot"
  return {
    props: {
      statusCode: context.res.statusCode,
      statusMessage: context.res.statusMessage,
    }
  }
}