┌─────────────────────────────────────────────────────┐
│                    Frontend                          │
│               (Next.js / React)                      │
├─────────────────────────────────────────────────────┤
│                   Supabase Client                    │
├─────────────────────────────────────────────────────┤
│                    Supabase                          │
│  ┌──────────────┬──────────────┬──────────────────┐ │
│  │   Database   │     Auth     │     Storage      │ │
│  │ (PostgreSQL) │              │                  │ │
│  └──────────────┴──────────────┴──────────────────┘ │
└─────────────────────────────────────────────────────┘

your-app/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/             # 認証関連ページ
│   │   │   ├── login/
│   │   │   └── register/
│   │   ├── (dashboard)/        # 認証後のページ
│   │   │   ├── layout.tsx      # ダッシュボードレイアウト
│   │   │   ├── page.tsx        # トップページ
│   │   │   └── [resource]/     # 各リソースのCRUDページ
│   │   ├── api/                # APIルート（必要に応じて）
│   │   ├── layout.tsx          # ルートレイアウト
│   │   └── page.tsx            # ランディングページ
│   ├── components/             # Reactコンポーネント
│   │   ├── ui/                 # 基本UIコンポーネント
│   │   ├── forms/              # フォームコンポーネント
│   │   ├── tables/             # テーブルコンポーネント
│   │   └── layouts/            # レイアウトコンポーネント
│   ├── lib/                    # ユーティリティ関数
│   │   ├── supabase/           # Supabaseクライアント
│   │   ├── utils/              # 汎用ユーティリティ
│   │   └── hooks/              # カスタムフック
│   └── types/                  # TypeScript型定義
│       ├── database.types.ts   # DBスキーマ型
│       └── index.ts            # その他の型
├── supabase/
│   ├── migrations/             # DBマイグレーション
│   └── config.toml             # Supabase設定
├── public/                     # 静的ファイル
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── next.config.js

// lib/supabase/client.ts
import { createClient } from '@supabase/supabase-js'
import { Database } from '@/types/database.types'

export const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// 使用例
const { data, error } = await supabase
  .from('customers')
  .select('*')
  .eq('status', 'active')
  .order('created_at', { ascending: false })

-- 例：顧客テーブルのRLSポリシー
CREATE POLICY "Users can view own customers" ON customers
  FOR SELECT
  USING (auth.uid() = user_id);

┌───────────┐     ┌───────────┐     ┌───────────┐
│   User    │────▶│  Next.js  │────▶│  Supabase │
│           │◀────│           │◀────│   Auth    │
└───────────┘     └───────────┘     └───────────┘
     │                                    │
     │        JWT Token                   │
     │◀──────────────────────────────────┘

// types/database.types.ts（自動生成）
export interface Database {
  public: {
    Tables: {
      customers: {
        Row: {
          id: string
          name: string
          email: string
          created_at: string
        }
        Insert: { ... }
        Update: { ... }
      }
    }
  }
}