【13】Next.js app routerのチュートリアルやってみる(エラーハンドリング error.tsx not-found.tsx)

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
 
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];
 
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }
 
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

/app/lib/actions.ts

export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
 
  const amountInCents = amount * 100;
 
  try {
    await sql`
        UPDATE invoices
        SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
        WHERE id = ${id}
      `;
  } catch (error) {
    return { message: 'Database Error: Failed to Update Invoice.' };
  }
 
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

/app/lib/actions.ts

export async function deleteInvoice(id: string) {
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}

これで、処理が成功した場合はリダイレクトして、

失敗した場合は、エラーをはくようになりました。

実験的にdeleteInvoiceでエラーをはくようにしてみましょう。

/app/lib/actions.ts

export async function deleteInvoice(id: string) {
+ throw new Error('Failed to Delete Invoice');
 
  // Unreachable code block
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice' };
  }
}

この状態で削除ボタンを押すと、エラーがブラウザに表示されます。

そこでerror.tsxを使いましょう。

error.tsx

error.tsxというファイルはエラーをキャッチし、フォールバックUIを表示してくれます。

/dashboard/invoicesにerror.tsxを作成します。

.
└── invoices/
    ├── [id]/
    │   └── edit/
    │       └── page.tsx
    ├── create/
    │   └── page.tsx
    ├── error.tsx // new!
    └── page.tsx

次のコードを貼り付けます。

/dashboard/invoices/erorr.tsx

'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={
          // Attempt to recover by trying to re-render the invoices route
          () => reset()
        }
      >
        Try again
      </button>
    </main>
  );
}

error.tsxはクライアントコンポーネントである必要があるそうです

そして、2 つのPropsを受け入れます。

error: このオブジェクトは JavaScript のネイティブのインスタンスです

reset: エラーをリセットする機能です。実行されると、関数はルートセグメントの再レンダリングを試みます。

これで再度削除ボタンを押すと、次のようなUIが表示されるようになりました。

not-found.tsx

エラーを適切に処理するもう 1 つの方法は、notFound関数を使用することです。

error.tsxではすべてのエラーをキャッチすることができますが、

存在しないリソースを取得しようとするときにはnot-found.tsxというファイルを使用できます。

/dashboard/invoices/[id]/edit/page.tsxに移動しましょう。

next/navigationからnotFoundをimportし、

もし、invoiceが空だったら、notFound()関数を実行します。

/dashboard/invoices/[id]/edit/page.tsx

import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
import { updateInvoice } from '@/app/lib/actions';
+import { notFound } from 'next/navigation';
 
export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);
 
+ if (!invoice) {
+   notFound();
+ }
 
  // ...
}

これで、リソースが見つからない場合にエラーがはかれるようになりました。

その場合のフォールバックUIを記述するために、/edit内にnot-found.tsxを作成します。

.
└── invoices/
    ├── [id]/
    │   └── edit/
    │       ├── page.tsx
    │       └── not-found.tsx // new!
    ├── create/
    │   └── page.tsx
    ├── error.tsx
    └── page.tsx

次に、not-found.tsxファイル内に次のコードを貼り付けます。

/dashboard/invoices/[id]/edit/not-found.tsx

import Link from 'next/link';
import { FaceFrownIcon } from '@heroicons/react/24/outline';
 
export default function NotFound() {
  return (
    <main className="flex h-full flex-col items-center justify-center gap-2">
      <FaceFrownIcon className="w-10 text-gray-400" />
      <h2 className="text-xl font-semibold">404 Not Found</h2>
      <p>Could not find the requested invoice.</p>
      <Link
        href="/dashboard/invoices"
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
      >
        Go Back
      </Link>
    </main>
  );
}

これで、存在しないリソースhttp://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/editにアクセスしてみましょう。

404ページが表示されましたね。

not-found.tsxはerror.tsxより優先されるため、より具体的なエラーを処理したい場合にこれを利用できます。

おわりに

便利ですね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【13】Next.js app routerのチュートリアルやってみる(エラーハンドリング error.tsx not-found.tsx)

はじめに

第13章 エラーハンドリング

サーバーアクションに try/catch の追加

error.tsx

not-found.tsx

おわりに

次の記事

第13章エラーハンドリング