Next.jsでショップを作る #1 開始と設計

/                        ← ホーム (ベストセラー / カテゴリの入口)
/products                ← 商品一覧 (?category=... でフィルター)
/products/[slug]         ← 商品詳細
/cart                    ← カート
/checkout                ← 配送情報 + 決済
/orders/[orderId]        ← 注文完了 / 照会

RootLayout
└── CartProvider             — カート状態 (Client Context)
    ├── Header               — ロゴ / カテゴリリンク / カートアイコン (数量バッジ)
    ├── {children}           — 各ページ
    └── Footer

{
  "slug": "minimal-tee-black",
  "name": "ミニマルTシャツ (ブラック)",
  "category": "apparel",
  "price": 24000,
  "description": "綿100%。無地デザイン。どこにでも合います。",
  "image": "/images/products/minimal-tee-black.jpg",
  "stock": 42
}

{
  id: 'ord_1748124000_a8c2',
  createdAt: '2026-05-25T10:00:00.000Z',
  items: [
    { slug: 'minimal-tee-black', name: 'ミニマルTシャツ (ブラック)', price: 24000, quantity: 2 },
    { slug: 'mug-white',         name: 'マグカップ (ホワイト)',      price: 12000, quantity: 1 },
  ],
  total: 60000,
  shipping: {
    name: '山田太郎',
    phone: '090-1234-5678',
    address: '東京都どこか123',
  },
  status: 'paid',
}

npx create-next-app@latest my-shop
cd my-shop

my-shop/
├── data/
│   └── products.json            ← 商品シードデータ
├── public/
│   └── images/
│       └── products/            ← 商品画像
├── src/
│   └── app/
│       ├── layout.js            ← RootLayout + CartProvider
│       ├── page.js              ← '/' ホーム
│       ├── products/
│       │   ├── page.js          ← '/products' 一覧
│       │   └── [slug]/
│       │       └── page.js      ← '/products/[slug]' 詳細
│       ├── cart/
│       │   └── page.js          ← '/cart' カート
│       ├── checkout/
│       │   └── page.js          ← '/checkout' チェックアウト
│       ├── orders/
│       │   └── [orderId]/
│       │       └── page.js      ← '/orders/[orderId]' 注文完了
│       └── lib/
│           ├── products.js      ← 商品照会ユーティリティ
│           └── orders.js        ← 注文保存/照会ユーティリティ
└── package.json

[
  {
    "slug": "minimal-tee-black",
    "name": "ミニマルTシャツ (ブラック)",
    "category": "apparel",
    "price": 24000,
    "description": "綿100%。無地デザイン。どこにでも合います。",
    "image": "/images/products/minimal-tee-black.jpg",
    "stock": 42
  },
  {
    "slug": "minimal-tee-white",
    "name": "ミニマルTシャツ (ホワイト)",
    "category": "apparel",
    "price": 24000,
    "description": "ブラックと同じ生地のホワイトカラー。",
    "image": "/images/products/minimal-tee-white.jpg",
    "stock": 38
  },
  {
    "slug": "mug-white",
    "name": "マグカップ (ホワイト)",
    "category": "goods",
    "price": 12000,
    "description": "厚手の陶器マグ。食洗機対応。",
    "image": "/images/products/mug-white.jpg",
    "stock": 80
  },
  {
    "slug": "tote-canvas",
    "name": "キャンバストートバッグ",
    "category": "goods",
    "price": 18000,
    "description": "デイリー使いのキャンバストート。A4が余裕で入ります。",
    "image": "/images/products/tote-canvas.jpg",
    "stock": 25
  },
  {
    "slug": "react-book",
    "name": "React実戦ガイド",
    "category": "book",
    "price": 32000,
    "description": "ReactとNext.jsの実戦パターンを一冊にまとめたガイド。",
    "image": "/images/products/react-book.jpg",
    "stock": 0
  },
  {
    "slug": "ts-book",
    "name": "TypeScript入門書",
    "category": "book",
    "price": 28000,
    "description": "TypeScriptの基礎からジェネリクスまで。",
    "image": "/images/products/ts-book.jpg",
    "stock": 15
  }
]

import products from '../../../data/products.json';

export function getAllProducts() {
  return products;
}

export function getProductsByCategory(category) {
  if (!category) return products;
  return products.filter((p) => p.category === category);
}

export function getProductBySlug(slug) {
  return products.find((p) => p.slug === slug) ?? null;
}

export function getAllCategories() {
  return Array.from(new Set(products.map((p) => p.category)));
}

const orders = new Map();

export function saveOrder(order) {
  orders.set(order.id, order);
}

export function getOrder(orderId) {
  return orders.get(orderId) ?? null;
}

npm run dev