Next.jsにおけるエラーハンドリングとカスタムエラーページ

エラーハンドリングは、ユーザー体験を向上させるために欠かせない要素です。Next.jsでは、クライアントサイドとサーバーサイドの両方でエラーを効率的に処理し、ユーザーに対して適切なフィードバックを提供することができます。ここでは、カスタムエラーページの作成方法や、エラーバウンダリの活用、サーバーエラーの対応について解説します。

カスタムエラーページの作成

Next.jsでは、標準で404エラーページや500エラーページが用意されていますが、プロジェクトの要件に応じてカスタマイズできます。カスタムエラーページを作成するには、次のようにそれぞれのファイルを追加します。

  • 404エラーページ: pages/404.jsを作成すると、ページが見つからない場合に表示されるカスタムエラーページを設定できます。

  • 500エラーページ: pages/500.jsを作成すると、サーバーサイドエラー発生時に表示されるページをカスタマイズできます。

// pages/404.js
export default function Custom404() {
  return <h1>ページが見つかりません</h1>;
}
// pages/500.js
export default function Custom500() {
  return <h1>サーバーエラーが発生しました</h1>;
}

エラーバウンダリの活用

Next.jsのエラーバウンダリは、Reactのエラーキャッチ機能を活用して、特定のコンポーネントやセクションでエラーが発生した際に、そのエラーをキャッチしてユーザーに通知する仕組みです。error.tsxやglobal-error.tsxファイルを作成し、アプリケーション全体または特定の部分でのエラーハンドリングを実装できます。

// components/ErrorBoundary.js
import React, { Component } from 'react';
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return <h1>何か問題が発生しました</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

この方法により、アプリケーションの他の部分に影響を与えることなく、特定のエラーに対してカスタムエラーメッセージを表示できます。

サーバーエラーの対応とエラーログ

サーバーサイドのエラーは、500エラーページでユーザーにフィードバックを提供するだけでなく、エラーレポートツールを使用して問題の追跡を行うことが重要です。例えば、SentryなどのツールをNext.jsに統合することで、エラーが発生した際に自動的にログを収集し、開発者が問題に迅速に対応できるようにすることができます。

import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  tracesSampleRate: 1.0,
});

まとめ

Next.jsでのエラーハンドリングは、カスタムエラーページやエラーバウンダリの設定を通じて、ユーザー体験の向上に貢献します。さらに、Sentryのようなツールを導入することで、エラーログの収集と迅速な問題解決が可能になります。これらの実践的な手法を活用して、より堅牢なアプリケーションを構築しましょう。

参照:

エラーハンドリングとカスタムエラーページの作成