next.jsアプリルーターでのエラー処理

next.js 13.4アプリルーターのエラー処理ガイド

この記事では、新しいエラーファイル慣習を使用してnext.jsのアプリルーターのエラーを処理する方法を説明します。

エラー処理は、Webアプリケーション開発の重要な側面です。過去には、次の.JSが開発者が404ページや500ページなどのエラーページをカスタマイズすることでエラーを処理するのを支援しました。ただし、これらのページには、特定のUI統合のサポートが限られている、Reactエラー境界の時代遅れのサポート、エラーが発生したときのアプリケーション機能が限られているなど、ページルーターに制限があります。

next.jsバージョン13.4のリリース後、新しいアプリルーターが正式に生産に導入されました。アプリルーターは、エラー処理やWebアプリケーションの構築のその他の基本部分のサポートと開発者エクスペリエンスを強化します。

キーポイント

• next.jsバージョン13.4は、エラー処理やWebアプリケーションのその他の重要な部分のサポートと開発者エクスペリエンスを強化するアプリルーターを導入します。
ディレクトリの
• appファイルは、エラーが発生したときにアプリケーションがクラッシュするのを防ぐために、Reactエラー境界を作成します。また、フォールバックコンポーネントとして機能し、境界内でエラーがスローされたときにレンダリングすることもできます。 error.tsx
カスタム例外は、アプリケーションの複数のルートにわたってエラーメッセージを抽象化するために作成できます。たとえば、さまざまなルートで認証エラーを処理するために、カスタム
• を使用できます。 AuthRequiredError
エラーは、next.jsアプリケーションのどこでも発生する可能性があります。それらは、最も近い親エラー境界に泡立ちます。ルートレイアウトまたはテンプレートエラーの場合、
• ファイルを使用する必要があります。サーバーコンポーネントまたはデータ収集中にエラーが発生した場合、next.jsは、対応するエラーオブジェクトを最も近いglobal-error.tsx境界に転送します。 error.tsx

シーンと設定

新しいエラー処理APIの理解を促進するために、next.jsユーザー認証アプリケーションでその実装を検討します。

ユーザー認証は多くのエラーが発生しやすいため、他のアプリケーションを構築する場合、この状況でエラーを処理する方法を学ぶことは大きなメリットになります。

開始する前に、この記事で使用して、ここにリンクされているリンクをクローン化して使用して使用します（メインブランチ）。アプリケーションを実行した後、下の画像に示されているエラーが表示されます。

このデモアプリケーションでは、メインページ（フォームの表示）にログインしたユーザーのみがアクセスできますが、いくつかのエラーが発生しています（この場合は人工的ですが、合法的に発生する可能性もあります）。 nullに割り当てられる変数。

注：簡単にするために、デモアプリケーションに認証は実装されません。

これはもちろんエラーにつながりますが、今ではアプリケーションがエラーの処理方法がわからないため、アプリケーションが完全にクラッシュします！

ここで、アプリケーションがクラッシュするのを防ぐためにこのエラーに対処する方法を学び、それによりアプリケーションのユーザーエクスペリエンスを大幅に改善します。

エラーページを作成します

アプリケーションがクラッシュするのを防ぐために、app/ディレクトリで、error.tsxファイルを作成します。このファイルを作成すると、メインページをラップするReactエラー境界が自動的に作成されます。次に、error.tsxファイルで、次の関数をエクスポートします。

<code class="language-typescript">"use client";

export default function Error() {
  return (
    <div classname="grid h-screen px-4 bg-white place-content-center">
      <div classname="text-center">
        <h1 classname="font-black text-gray-200 text-9xl">401</h1>
        <p classname="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          未授权！
        </p>
        <p classname="mt-4 text-gray-500">
          您必须登录才能访问此页面
        </p>
        <button type="button" classname="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring">
          重试
        </button>
      </div>
    </div>
  );
}</code>

注：エラーコンポーネントはクライアントコンポーネントである必要があります！それらをクライアントコンポーネントとしてマークするようにしてください。

エクスポートされた関数は、フォールバックコンポーネントとして機能します。境界内にエラーがスローされた場合、エラーがキャッチされ、フォールバックコンポーネントがレンダリングされます。これは以下のように見えます。

エラーが発生すると、2つのプロップがエラーフォールバックコンポーネントに渡されます。エラーオブジェクト自体と、エラーから回復しようとする関数（通常はリセットと呼ばれます）：

<code class="language-typescript">"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  // ...
}</code>

エラープロップを介してエラーメッセージにアクセスし、次のように画面に表示することができます。

この関数が呼び出されると、リセット関数は、エラー境界に囲まれた元のコンテンツを返信しようとします。成功した場合、フォールバックエラーコンポーネントは再レンダリングされたコンテンツに置き換えられます。

<code class="language-typescript"><p classname="mt-4 text-gray-500">
  {error.message || "您必须登录才能访问此页面"}
</p></code>

オンクリックハンドラーを使用してボタンにリセット機能呼び出しを実装できます：

このように、私たちは間違いをうまく処理しました！

抽象エラーメッセージ

<code class="language-typescript"><button type="button" onclick="{()"> reset()}
  className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring cursor-pointer"
>
  重试
</button></code>

実際のユーザー認証アプリケーションでは、保護する必要があるルートがたくさんある場合があり、認証エラーが発生した場合は、複数の場合に同じ認証エラーメッセージを使用する必要があります。

エラーメッセージを抽象化する（繰り返し書かれていない）ために、認証に関連するカスタム例外を簡単に作成できます。

これを行うには、そのディレクトリに

というディレクトリを作成し、

と呼ばれるファイルを作成します。このファイルでは、次のようにカスタム認証エラーの例外を作成およびエクスポートできます。

今、この新しいカスタムをメインページにスローすることができます

：lib exceptions.ts

このエラーにより、コンストラクターで渡されたデフォルトのメッセージ、または後で渡す必要がある可能性のあるより具体的なエラーが得られます。

<code class="language-typescript">export class AuthRequiredError extends Error {
  constructor(message = "需要身份验证才能访问此页面") {
    super(message);
    this.name = "AuthRequiredError";
  }
}</code>

エラー処理の詳細

AuthRequiredError最後に、レイアウトとサーバーのエラーについては、いくつかの追加を見てみましょう。 Error レイアウトのエラー

<code class="language-typescript">export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}</code>

エラーはアプリケーションのどこでも（

ファイルだけでなく）発生する可能性があり、next.jsで使用されるファイルルーティングシステムは、ネストされたルーティングとレイアウトで境界がどのように機能するかに影響します。

エラーは、下の画像で見ることができる最も近い親エラー境界に泡立ちます。

このエラーバブルの性質は、エラー境界がレイアウトファイルをラップするため、同じセクションのレイアウトファイルのエラーをキャプチャしないことを意味します。 error.tsx

ルートレイアウトまたはテンプレートでエラーが発生した場合は、下の図に示すように

ファイルを使用します。 global-error.tsx

境界はアプリケーション全体をラップしますので、このファイルを使用するときは、独自の一意のglobal-error.tsxおよびタグを追加してください。このエラー境界は、他のネストされた境界がキャッチされていないエラーをキャッチするため、頻繁にアクティブになりません。 error.tsx

サーバーエラー

サーバーコンポーネントまたはデータ収集中にエラーが発生した場合、次の.JSは、対応するエラーオブジェクトを最も近い

境界に転送します。 error.tsx

結論と次のステップ

多くの開発者は、エラー処理を実装するのは面倒だと考えていますが、アプリケーションの重要な部分であり、エラー処理を正常に実装すると、アプリケーションのユーザーエクスペリエンスが大幅に向上します。

next.jsは、アプリルーターと

ファイルコンベンションでこれを非常に簡単にします。 error.tsx

エラー処理の詳細については、next.jsのドキュメントを参照してください。Githubでこの記事の完了コードを表示することもできます。

next.jsでのマスタリングエラー処理に関するFAQ routerを使用して

（FAQの部分は、元のテキストのFAQの一部が記事の内容と高度な複製を持っているため、ここでは省略されており、いくつかの問題はアプリルーターのエラー処理メカニズムと弱く相関しています。必要に応じて、追加できます。それは元のテキストに従って。）

以上がnext.jsアプリルーターでのエラー処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。