昨日と今日の2日間で、Aloha Goodies の Next.js 版を完成させることができました。
実装した主な動作
- Topページに各カテゴリを一覧表示
- 各カテゴリをクリックすると、そのカテゴリ内の商品一覧を表示
- 商品をクリックすると、詳細情報を overlay 表示
- 左上のロゴマークをクリックすると Topページへ戻る
- 右端の Hamburger メニューから
- 「全アイテム検索」
- 「お問い合わせ」
へ遷移可能
全アイテム検索ページ
- 初期状態では全カテゴリが選択され、全商品を表示
- チェックボックスでカテゴリを絞り込み、該当商品のみを表示
- 商品をクリックすると、ここでも詳細ページを overlay で表示
お問い合わせページ
- 名前・メールアドレス・メッセージを入力可能
- 送信ボタンは設置しているが、送信先の処理は未実装
工夫した点
- データベースは使用せず、
lib/data.tsに商品データを定義 src/app/[slug]/page.tsxを共通で使い、すべてのカテゴリページを表示できる構成にした- コンポーネントを細かく分け、共通コンポーネントとして再利用
- 商品画像・商品名・説明文は AI を活用して作成
- 全アイテム検索では、カテゴリと商品の紐づけを意識し、効率よく商品が表示されるように実装した