Home

エラーページの作成

定数の定義

src/frontend/src/constants/styles.ts

/**
 * スタイル関連の定数
 */
export const STYLES = {
  ...（略）...
  // ヘッダ、フッタ関連
  ...（略）...

  // ↓追加
  // エラーページ関連
  ERROR_PAGE: `flex min-h-screen items-center justify-center bg-gray-100`,
  ERROR_PAGE_CARD: `flex w-full max-w-md flex-col items-center rounded-lg border border-gray-300 bg-white p-8 shadow-lg`,
  ERROR_PAGE_TITLE: `mb-6 text-center text-2xl font-bold text-rose-600`,
  ERROR_BUTTON: `cursor-pointer rounded bg-indigo-400 px-2 py-1 font-semibold text-white hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-400 disabled:cursor-not-allowed disabled:bg-gray-300`,
  // ↑追加
  ...（略）...
} as const;

error.tsx の作成

src/frontend/src/app/error.tsx

"use client";

import { STYLES } from "@/constants/styles";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className={`${STYLES.ERROR_PAGE}`}>
      <div className={`${STYLES.ERROR_PAGE_CARD}`}>
        <h1 className={`${STYLES.ERROR_PAGE_TITLE}`}>Something went wrong!</h1>
        <button className={`${STYLES.ERROR_BUTTON}`} onClick={() => reset()}>
          Try again
        </button>
      </div>
    </div>
  );
}

エラーページの確認

エラーページの表示確認用に、app/page.tsxに一時的に下記のコードを追加してください。

src/frontend/src/app/page.tsx

import Index from "./components/Index";

const Page = () => {
  throw new Error("test error"); // <- 一時的に追加
  return <Index />;
};

export default Page;

ブラウザで下記 URL にアクセスすると、「Something went wrong!」と表示されます。

• http://localhost:3000/

確認後はapp/page.tsxを元に戻してください。

参考

1. Routing: Error Handling | Next.js