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

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

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

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

キーポイント

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

シーンと設(shè)定

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

ユーザー認(rèn)証は多くのエラーが発生しやすいため、他のアプリケーションを構(gòu)築する場(chǎng)合、この狀況でエラーを処理する方法を?qū)Wぶことは大きなメリットになります。

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

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

注：簡(jiǎn)単にするために、デモアプリケーションに認(rèn)証は実裝されません。

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

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

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

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

"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">
          未授權(quán)！
        </p>
        <p className="mt-4 text-gray-500">
          您必須登錄才能訪問(wèn)此頁(yè)面
        </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>
  );
}

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

エクスポートされた関數(shù)は、フォールバックコンポーネントとして機(jī)能します。境界內(nèi)にエラーがスローされた場(chǎng)合、エラーがキャッチされ、フォールバックコンポーネントがレンダリングされます。これは以下のように見(jiàn)えます。

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

"use client";

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

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

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

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

<p className="mt-4 text-gray-500">
  {error.message || "您必須登錄才能訪問(wèn)此頁(yè)面"}
</p>

オンクリックハンドラーを使用してボタンにリセット機(jī)能呼び出しを?qū)g裝できます：

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

抽象エラーメッセージ

<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>

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

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

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

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

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

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

：lib exceptions.ts

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

export class AuthRequiredError extends Error {
  constructor(message = "需要身份驗(yàn)證才能訪問(wèn)此頁(yè)面") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

エラー処理の詳細(xì)

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

export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}

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

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

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

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

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

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

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

サーバーエラー

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

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

結(jié)論と次のステップ

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

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

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

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

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

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

以上がnext.jsアプリルーターでのエラー処理の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。