PackagesUIComponents
NotFound
URLやリソースが存在しない場合にページ全体で表示する404コンポーネント。ステータスコード・説明・ナビゲーションアクションを組み合わせて、ユーザーを正しいページへ誘導する。
いつ使うか
- Next.js の
not-found.tsxなど、URLに対応するページが存在しない場合に使用する - リソースが削除・移動された場合のフォールバック画面として使用する
いつ使わないか
- データが0件の場合には使わない。
EmptyStateを使用する - サーバーエラー（500系）の表示には使わない。エラーの性質が異なるため、専用のエラー画面を用意する
- 部分的なコンテンツの欠損には使わない。該当箇所に
EmptyStateを表示する
Usage
import { NotFound } from '@bi-shop-it/ui/not-found';
<NotFound />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | "ページが見つかりません" | 見出しテキスト |
description | string | "お探しのページは存在しないか、移動した可能性があります。" | 補足説明テキスト |
children | ReactNode | — | 「ホームに戻る」ボタン等のナビゲーションアクション |
バリエーション
デフォルト
Props なしでそのまま使える基本パターン。404・タイトル・説明テキストを表示する。
404
ページが見つかりません
お探しのページは存在しないか、移動した可能性があります。
<NotFound />ナビゲーションアクション付き
children に ActionLinkButton を渡して、ホームページへの導線を提供する。
404
ページが見つかりません
お探しのページは存在しないか、移動した可能性があります。
<NotFound>
<ActionLinkButton
href="/"
icon="Home"
label="ホームに戻る"
size="sm"
variant="outline"
/>
</NotFound>カスタムテキスト
title と description を上書きして、状況に応じたメッセージを表示する。
404
お探しのページは存在しません
このページは削除されたか、URLが変更された可能性があります。
<NotFound
description="このページは削除されたか、URLが変更された可能性があります。"
title="お探しのページは存在しません"
/>アクセシビリティ
コンポーネントが内部で処理すること
data-slot="not-found"属性を付与し、テスト・スタイリングの対象として識別可能にする- テキストコンテンツのみで構成されるため、スクリーンリーダーが自然に読み上げることができる
利用者が対応すること
- ナビゲーションボタンを配置する場合は、ボタン自体に適切なラベルを設定すること
- Next.js の
not-found.tsxで使用する場合、HTTPステータスコード 404 はフレームワーク側で設定されるため、コンポーネント側での対応は不要
関連コンポーネント
EmptyState— データが0件の場合に使用する。NotFound はURLやリソースの不在に対して使用するActionLinkButton— ナビゲーションアクションとしてchildrenに渡すことが多い