Next.js - エラーハンドリングをカスタマイズする方法

イントロダクション

Next.jsでは、クライアントサイドのエラーハンドリングをカスタマイズすることができます。例えば、デフォルトのエラーメッセージの代わりに、独自のエラーページを作成することができます。このブログは、このカスタマイズ方法について説明します。

_error.jsを使用したカスタマイズ

エラーハンドリングをカスタマイズするために、pagesフォルダ配下に_error.jsを使用します。このファイルを、あなたのアプリケーションのルートディレクトリのpagesフォルダ内に配置します。次に、このファイルに、独自のエラーメッセージを追加します。

以下は、カスタムエラーページを作成する例です。

// pages/_error.js

import React from 'react'

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

この例では、サーバーサイドでエラーが発生した場合は、そのHTTPステータスコードを表示し、クライアントサイドでエラーが発生した場合は、「An error occurred on client」と表示します。

しかし、これは単なる例であり、アプリケーションのデザインに合わせて、エラーページを自由にカスタマイズすることが可能です。

エラーページの設定方法

カスタムエラーページを作成するために、まず、アプリケーションのルートディレクトリに_error.jsという名前のファイルを作成します。このファイル内には、独自のエラーメッセージを書き込みます。

次に、エラーが発生した際に、このエラーページを表示するように設定します。エラーが発生した場合、Next.jsは自動的に_error.jsを探します。そして、このファイルが見つかった場合、そのファイルの内容を表示します。

エラーハンドリングの例

以下は、カスタムエラーページを使用したエラーハンドリングの例です。この例では、エラーが発生した場合に、独自のエラーページが表示されます。

// pages/_error.js

function ErrorPage({ statusCode, errorMessage }: Props) {
  // 直前のページ
  const handleBack = () => {
    Router.back()
  }
  // トップページ
  const handleHome = () => {
    Router.push('/')
  }

  if (statusCode) {
    return (
      <div>
        <span type='header2'>{statusCode} Not Found</span>
        <p>{errorMessage}</p>
        <div>
          <div>
            <button label={'前のページに戻る'} onClick={handleBack} />
          </div>
          <div>
            <button label={'トップ'} onClick={handleHome} />
          </div>
        </div>
      </div>
    )
  }

  return (
    <div>
      <div>
        <span>{statusCode} Not Found</Span>
      </div>
      <Paragraph>{errorMessage}</Paragraph>
      <div>
        <div>
          <button label={'前のページに戻る'} onClick={handleBack} />
        </div>
        <div>
          <button label={'トップ'} onClick={handleHome} />
        </div>
      </div>
    </div>
  )
}

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  const errorMessage = err ? err.message : 'お探しのページは見つかりませんでした。'

  return { statusCode, errorMessage }
}

export default ErrorPage

この例では、ユーザーが存在しないページにアクセスするなどのエラーが発生した際、ステータスコードとエラーメッセージを表示します。また、「前のページに戻る」ボタンと「トップ」ボタンで、ユーザーが他のページに容易に移動できるようにしています。**getInitialProps**関数で初期化されます。

結論

Next.jsを使用すると、クライアントサイドのエラーハンドリングをカスタマイズすることができます。_error.jsページを作成することで、独自のエラーページを作成し、アプリケーションのデザインに合わせてカスタマイズすることが可能です。