Practice Next.js EC

React/Next.jsを学習しながらECサイトを構築するプロジェクトです。

目次

• 概要
• 技術スタック
• セットアップ
  • 前提条件
  • インストール
• 開発
• プロジェクト構成
• 学習ガイド
• ライセンス
• 貢献

概要

このプロジェクトは、React初心者が段階的に学習しながら本格的なECサイトを構築することを目的としています。Phase 0〜18の学習ガイドに沿って、基礎から応用まで体系的に学べます。

技術スタック

カテゴリ	技術
フレームワーク	Next.js 16 (App Router)
言語	TypeScript 5.9+
スタイリング	Tailwind CSS 4, shadcn/ui
状態管理	Jotai
バリデーション	Zod 4
テスト	Vitest, Playwright, Testing Library
コンポーネント開発	Storybook 10
パッケージマネージャー	pnpm 10
ランタイム	Node.js 24

セットアップ

前提条件

• mise がインストールされていること

インストール

# ランタイムのインストール（Node.js, pnpm）
mise install

# 依存関係のインストール
pnpm install

開発

# 開発サーバー起動（http://localhost:3000）
pnpm dev

# Storybook 起動（http://localhost:6006）
pnpm storybook

# リント
pnpm lint

# ビルド
pnpm build

プロジェクト構成

app/           # Next.js App Router のページとレイアウト
components/    # UI コンポーネント（shadcn/ui）
lib/           # ユーティリティ関数
stories/       # Storybook ストーリー
types/         # TypeScript 型定義
docs/          # 学習ガイド（Phase 0〜18）

学習ガイド

詳細な学習ガイドは docs/README.md を参照してください。

ライセンス

MIT

貢献

貢献方法については CONTRIBUTING.md を参照してください。