My App

Next.js 15 + TypeScript + Tailwind CSS + shadcn/ui を使用したモダンなWebアプリケーションテンプレートです。

技術スタック

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (Radix UI primitives)
• Authentication: Supabase Auth
• Database: PostgreSQL (Supabase) + Drizzle ORM
• Code Quality: Biome (linting & formatting)
• Testing: Vitest + Testing Library
• Storybook: Component development & documentation
• Package Manager: Bun
• Git Hooks: Lefthook

開発環境のセットアップ

前提条件

• Node.js 18.0.0 以上
• Bun (推奨) または npm/yarn/pnpm
• Supabaseアカウント
• GitHubアカウント（OAuth認証用）
• Googleアカウント（OAuth認証用）

クイックスタート

# リポジトリをクローンまたはテンプレートから作成
git clone <your-repo-url>
cd <your-repo-name>

# 依存関係をインストール
bun install

# 環境変数の設定
cp .env.example .env.local

Supabaseのセットアップ

このテンプレートはSupabaseを使用した認証とデータ管理を実装しています。

📖 ドキュメント

• データベースセットアップガイド - Supabase + Drizzle ORMの設定手順
• Supabaseを使わない場合 - 認証機能が不要な場合

必要な設定

Supabaseを使用する場合は、以下の設定が必要です：

1. Supabaseプロジェクトの作成
2. OAuth認証の設定（GitHub/Google）
3. 環境変数の設定
4. データベースとストレージのセットアップ

開発サーバーの起動

bun run dev

http://localhost:3000 でアプリケーションにアクセスできます。

利用可能なコマンド

開発

bun run dev          # 開発サーバーを起動
bun run build        # プロダクション用ビルド
bun run start        # プロダクションサーバーを起動
bun run typecheck    # TypeScript型チェック

コード品質

bun run check        # Biome linter/formatter チェック
bun run check:fix    # Biome 自動修正（unsafe修正含む）
bun run format       # Biome フォーマットチェック
bun run format:fix   # Biome 自動フォーマット

テスト

bun run test         # Vitestでテスト実行

Storybook

bun run storybook        # Storybook開発サーバーを起動 (http://localhost:6006)
bun run build-storybook  # Storybookをビルド

プロジェクト構成

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # グローバルスタイル
│   ├── layout.tsx         # ルートレイアウト
│   └── page.tsx           # ホームページ
├── components/
│   ├── ui/                # shadcn/ui コンポーネント
│   ├── shared/            # 共有コンポーネント
│   └── features/          # 機能別コンポーネント
└── lib/
    └── utils.ts           # ユーティリティ関数

コーディング規約

このプロジェクトは厳密なコーディング規約に従っています：

• コンポーネント命名: ディレクトリ名（kebab-case）とTSXファイル名（PascalCase）の対応
• インポート: @/ エイリアスを使用した絶対パス
• コード品質: Biomeによる自動linting/formatting
• Git Hooks: コミット前の自動品質チェック

詳細は CLAUDE.md を参照してください。

Git Hooks

Lefthookにより以下のフックが自動実行されます：

• Pre-commit: bun run check:fix による自動修正
• Pre-push: bun run check と bun run typecheck による品質チェック

shadcn/ui

shadcn/uiコンポーネントは src/components/ui/ に配置されています。新しいコンポーネントを追加する場合：

bunx shadcn@latest add [component-name]

認証機能

このテンプレートには、Supabase Authを使用した認証機能が実装されています：

• GitHub OAuth認証
• Google OAuth認証
• ログイン/ログアウト機能
• 認証状態に応じたUIの出し分け
• プロフィールアバターの表示

認証フロー

1. ユーザーが「Sign In」ボタンをクリック
2. /loginページでGitHub/Googleログインボタンをクリック
3. 選択したプロバイダーの認証画面にリダイレクト
4. 認証成功後、/auth/callbackでセッションを作成
5. ホームページにリダイレクト

プロフィール機能

ユーザーは自分のプロフィール情報を管理できます：

機能一覧

• プロフィール表示: /profileページでユーザー情報を表示
• 名前の編集: 表示名を自由に変更可能
• アバター画像のアップロード:
  • 最大5MBまでの画像ファイルをアップロード
  • アップロード中のプログレス表示
  • 即時プレビュー機能
  • Supabase Storageに安全に保存

プロフィール編集フロー

1. ヘッダーのユーザーメニューから「Profile」を選択
2. /profileページでプロフィール情報を確認
3. アバター画像をクリックして新しい画像を選択
4. 名前フィールドを編集
5. 「Update Profile」ボタンで保存

技術的な実装

• データ管理: public.usersテーブルでユーザー情報を管理
• 画像保存: Supabase Storageのavatarsバケットに保存
• リアルタイムバリデーション: Zodスキーマによる入力検証
• アクセシビリティ: shadcn/uiのFormコンポーネントでWCAG準拠

参考リンク

• Next.js Documentation
• Tailwind CSS
• shadcn/ui
• Supabase Auth
• Biome
• Vitest
• Storybook