// サインアップ
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password',
})

// OAuthログイン（Google）
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
})

// セッション取得（Server Component）
const { data: { session } } = await supabase.auth.getSession()

✅ メール/パスワード・OAuth・マジックリンク・MFA
✅ RLSと連携してDBレベルで認可できる
✅ 無料枠：50,000ユーザーまで
❌ 独自の複雑な認証ロジックには向かない

// セットアップ（Hono + Drizzle と相性が良い）
import { betterAuth } from 'better-auth'
import { drizzleAdapter } from 'better-auth/adapters/drizzle'

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: 'pg' }),
  emailAndPassword: { enabled: true },
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
})

✅ 自己ホストのため外部サービス依存なし
✅ Drizzle / Prisma アダプター完備
✅ セッション管理・OAuth・メール認証が揃っている
✅ TypeScript ネイティブ
❌ Supabase Auth より設定量が多い

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'

export const { handlers, auth } = NextAuth({
  providers: [Google],
})

// Server Componentでセッション取得
const session = await auth()

✅ Next.jsとの親和性が最も高い
✅ 多数のOAuthプロバイダーに対応
⚠️ Auth.jsへのリネームで過渡期。ドキュメントが混在している
❌ DBアダプターの設定がやや複雑

// middleware.ts に1行追加するだけで全保護
import { clerkMiddleware } from '@clerk/nextjs/server'
export default clerkMiddleware()

// コンポーネントでユーザー取得
import { currentUser } from '@clerk/nextjs/server'
const user = await currentUser()

✅ 設定がほぼゼロ。UIコンポーネントも付属
✅ 組織・チーム管理・MFAが標準搭載
❌ 月$25〜。MAUが増えると高額になる
❌ 外部サービス依存

✅ 企業AD・SAML・SSO連携が必要なとき
✅ MFAが必須要件（医療・金融系）
✅ 既存のCognitoユーザープールがある
❌ 個人開発では過剰。設定が複雑

Supabase使う？
  └─ YES → Supabase Auth（ほぼ確定）
  └─ NO  → 時間を買いたい？
              └─ YES → Clerk（$25〜）
              └─ NO  → Next.js中心？ → NextAuth.js
                        Hono/Drizzle中心？ → Better Auth

// schema.ts
import { pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core'

export const posts = pgTable('posts', {
  id: uuid('id').defaultRandom().primaryKey(),
  title: text('title').notNull(),
  userId: uuid('user_id').notNull(),
  createdAt: timestamp('created_at').defaultNow(),
})

// クエリ（SQLに近い直感的な記法）
const userPosts = await db
  .select()
  .from(posts)
  .where(eq(posts.userId, userId))
  .orderBy(desc(posts.createdAt))
  .limit(10)

// JOIN
const result = await db
  .select({ post: posts, user: users })
  .from(posts)
  .innerJoin(users, eq(posts.userId, users.id))

✅ SQLに近い記法で学習コストが低い
✅ バンドルサイズが小さい（Edge Runtime対応）
✅ Honoとの相性が良い
✅ マイグレーションがシンプル
❌ Prismaほどのエコシステムはまだない

// schema.prisma
model Post {
  id        String   @id @default(cuid())
  title     String
  user      User     @relation(fields: [userId], references: [id])
  userId    String
  createdAt DateTime @default(now())
}

// クエリ（直感的なオブジェクト記法）
const posts = await prisma.post.findMany({
  where: { userId },
  include: { user: true },  // JOINが直感的
  orderBy: { createdAt: 'desc' },
  take: 10,
})

✅ スキーマ定義が読みやすい
✅ `include` でJOINが直感的
✅ マイグレーションが自動生成
✅ 大きなコミュニティ・ドキュメントが豊富
❌ バンドルサイズが大きい（Edge Runtime非対応）
❌ N+1問題が起きやすい

# Django → マイグレーションが最強
python manage.py makemigrations  # 差分を自動検出
python manage.py migrate         # 適用

# モデル変更 → 自動でSQLを生成してくれる
class Post(models.Model):
    title = models.CharField(max_length=200)
    # フィールド追加するだけでmakemigrationsが検出

# Drizzle → SQLに近い、差分管理が明示的
npx drizzle-kit generate  # マイグレーションファイル生成
npx drizzle-kit migrate   # 適用

# Prisma → 自動生成だがDjangoほど賢くない
npx prisma migrate dev --name add_post_table

// 型安全にするにはsupabase-jsの型生成を使う
import { Database } from '@/types/supabase'  // npx supabase gen types で生成

const supabase = createClient<Database>(url, key)

const { data, error } = await supabase
  .from('posts')
  .select('*, users(name)')  // JOINはこの記法
  .eq('user_id', userId)

// ユーティリティクラスで直接スタイリング
export function Card({ title, description }: Props) {
  return (
    <div className="rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
      <p className="mt-2 text-sm text-gray-500">{description}</p>
    </div>
  )
}

// レスポンシブ・ダークモードも直感的
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 dark:bg-gray-900">

✅ Next.jsと公式統合済み（設定ゼロ）
✅ コンポーネントとスタイルが一体で管理しやすい
✅ パージ機能で本番バンドルサイズが小さい
❌ クラス名が長くなりがち → cn()ユーティリティで対処

# コンポーネントをプロジェクトにコピーして使う（依存しない設計）
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader } from '@/components/ui/dialog'

// Radix UI + Tailwind CSS の組み合わせ
<Button variant="outline" size="sm">キャンセル</Button>

✅ コンポーネントをコピーして自由にカスタマイズできる
✅ アクセシビリティ対応（Radix UI ベース）
✅ Tailwind CSSと完全統合
✅ 個人開発〜SaaSまで幅広く使える
❌ npmパッケージではなくファイルコピー方式のため更新が手動

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// 使い方：条件付きクラスの衝突を解決してくれる
<div className={cn(
  'rounded-md px-4 py-2',
  isActive && 'bg-blue-500 text-white',
  isDisabled && 'opacity-50 cursor-not-allowed',
)}>

【Next.js単体（Route Handlers）】
app/
  api/
    posts/
      route.ts     ← GETとPOSTを1ファイルで管理
    users/
      route.ts

問題：
  ❌ 認証チェックを毎ルートに書く必要がある
  ❌ ルートが増えると管理が煩雑
  ❌ バックエンドだけ別サービスに切り出せない

【Next.js + Hono】
app/
  api/
    [[...route]]/
      route.ts     ← Honoがここで全APIを受け取る

// Hono側
const app = new Hono()
app.use('/api/*', authMiddleware)    // 認証を一元管理
app.use('/api/*', loggingMiddleware) // ロギングも一元管理
app.route('/api/posts', postsRoute)
app.route('/api/users', usersRoute)

メリット：
  ✅ ミドルウェアで横断的な処理を一元化
  ✅ 将来バックエンドをCloudflare Workers等に切り出せる
  ✅ OpenAPIによる自動ドキュメント生成が可能

Next.js：
  ✅ RSC（React Server Components）対応
  ✅ ISRなど豊富なキャッシュ戦略
  ✅ エコシステムが最大
  ❌ App RouterとPages Routerの共存が混乱を生む

Remix：
  ✅ フォーム処理・データミューテーションが直感的
  ✅ エラーバウンダリが強力
  ✅ Web標準（FormData等）に準拠
  ❌ ISR相当の機能がない
  ❌ コミュニティがNext.jsより小さい

// utils.test.ts
import { describe, it, expect } from 'vitest'
import { formatPrice } from '@/lib/utils'

describe('formatPrice', () => {
  it('整数を日本円フォーマットに変換する', () => {
    expect(formatPrice(1000)).toBe('¥1,000')
  })
  it('小数点以下を切り捨てる', () => {
    expect(formatPrice(999.9)).toBe('¥999')
  })
})

# 設定（vite.config.ts）
export default defineConfig({
  test: {
    environment: 'jsdom',  // Reactコンポーネントのテスト用
    globals: true,
  },
})

✅ Jestより高速（Viteを使うため）
✅ Next.js / Viteプロジェクトとの相性が良い
✅ TypeScriptのサポートが標準

// e2e/login.spec.ts
import { test, expect } from '@playwright/test'

test('ログインしてダッシュボードに遷移する', async ({ page }) => {
  await page.goto('/login')
  await page.fill('[name=email]', 'test@example.com')
  await page.fill('[name=password]', 'password')
  await page.click('[type=submit]')
  await expect(page).toHaveURL('/dashboard')
  await expect(page.getByText('ようこそ')).toBeVisible()
})

✅ ブラウザ実機（Chromium・Firefox・Safari）でテスト
✅ スクリーンショット・動画記録が標準搭載
✅ CIとの統合が容易
❌ テストが遅い（E2Eの宿命）
❌ テスト環境のDB管理が必要

// mocks/handlers.ts
import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/posts', () => {
    return HttpResponse.json([
      { id: '1', title: 'テスト投稿' },
    ])
  }),
]

// Vitestでも Playwright でも同じモックを使い回せる

優先度高：
  ✅ 認証フロー（ログイン・ログアウト・セッション切れ）
  ✅ 課金・決済フロー
  ✅ ユーティリティ関数・バリデーションロジック

優先度中：
  ⚠️ 主要なCRUD操作
  ⚠️ 権限・アクセス制御

優先度低（後回しでOK）：
  △ UIコンポーネントの見た目
  △ 静的ページ

GitHubリポジトリ連携だけで：
  main push      → 本番デプロイ（production）
  feature/xxx    → プレビューURL自動生成
  staging        → ステージング環境として固定運用

設定：ほぼゼロ ✅

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - run: npm ci              # npm install ではなく ci（ロックファイルを厳守）
      - run: npm run type-check  # TypeScriptの型チェック
      - run: npm run lint        # ESLint
      - run: npm run test        # Vitest

  # テストが通ったらVercelが自動でデプロイ（連携設定済みの場合）

# .github/workflows/deploy.yml
name: Deploy to ECS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Login to ECR
        run: aws ecr get-login-password | docker login --username AWS --password-stdin $ECR_URI

      - name: Build & Push Docker image
        run: |
          docker build -t $ECR_URI/my-app:${{ github.sha }} .
          docker push $ECR_URI/my-app:${{ github.sha }}

      - name: Update ECS service
        run: |
          aws ecs update-service \
            --cluster my-cluster \
            --service my-app \
            --force-new-deployment

main          → 本番デプロイ（直接pushは禁止、PRのみ）
staging       → ステージング（固定ブランチとして維持）
feature/xxx   → 機能開発（プレビューURL生成）
fix/xxx       → バグ修正

PR フロー：
feature/xxx → staging（動作確認） → main（本番リリース）

// ❌ 旧来のやり方（クライアントでfetch + useState）
'use client'
function PostList() {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    fetch('/api/posts').then(r => r.json()).then(setPosts)
  }, [])
  return <div>{posts.map(p => <Post key={p.id} post={p} />)}</div>
}

// ✅ RSCのやり方（サーバーで直接fetch、状態不要）
async function PostList() {  // 'use client' 不要
  const posts = await db.select().from(postsTable)
  return <div>{posts.map(p => <Post key={p.id} post={p} />)}</div>
}

// store/ui.ts
import { create } from 'zustand'

interface UIStore {
  isModalOpen: boolean
  theme: 'light' | 'dark'
  openModal: () => void
  closeModal: () => void
  toggleTheme: () => void
}

export const useUIStore = create<UIStore>((set) => ({
  isModalOpen: false,
  theme: 'light',
  openModal: () => set({ isModalOpen: true }),
  closeModal: () => set({ isModalOpen: false }),
  toggleTheme: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
}))

// コンポーネントで使う
const { isModalOpen, openModal } = useUIStore()

✅ シンプルなAPI（BoilerplateがReduxより大幅に少ない）
✅ TypeScriptとの相性が良い
✅ DevTools対応
❌ サーバーデータの管理には向かない（TanStack Queryを使う）

// RSCを使わない場面（Pages Router or クライアントfetch）でのサーバーデータ管理
const { data: posts, isLoading, error } = useQuery({
  queryKey: ['posts', userId],
  queryFn: () => fetch(`/api/posts?userId=${userId}`).then(r => r.json()),
  staleTime: 5 * 60 * 1000,  // 5分間はキャッシュを使う
})

// ミューテーション（更新後に自動でキャッシュ無効化）
const mutation = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', { method: 'POST', body: JSON.stringify(newPost) }),
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['posts'] }),
})

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email('有効なメールアドレスを入力してください'),
  password: z.string().min(8, 'パスワードは8文字以上です'),
})

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
    </form>
  )
}

フレームワーク : Next.js 15 (App Router)
認証          : Supabase Auth
DB/ORM        : Supabase Client（型生成あり）
CSS           : Tailwind CSS + shadcn/ui
状態管理      : useState + RSC（Zustandは必要になったら）
テスト        : Vitest（ユーティリティのみ）
CI/CD         : Vercel自動デプロイ

フレームワーク : Next.js 15 + Hono
認証          : Supabase Auth / Better Auth
DB/ORM        : Drizzle + Supabase(PG)
CSS           : Tailwind CSS + shadcn/ui
状態管理      : Zustand + TanStack Query
テスト        : Vitest + Playwright（主要フローのみ）
CI/CD         : GitHub Actions（テスト）+ Vercel（デプロイ）

フレームワーク : Next.js + Django REST Framework
認証          : Django Auth / Better Auth
DB/ORM        : Django ORM + Drizzle（Next.js側）
CSS           : Tailwind CSS + shadcn/ui
状態管理      : Zustand + TanStack Query
テスト        : Pytest（Django）+ Vitest + Playwright
CI/CD         : GitHub Actions + Render/Railway

フレームワーク : Next.js + Hono or Django
認証          : Cognito / Better Auth
DB/ORM        : Prisma / Drizzle + RDS
CSS           : Tailwind CSS + shadcn/ui / 独自デザインシステム
状態管理      : Zustand + TanStack Query
テスト        : Vitest + Playwright + 負荷テスト（k6等）
CI/CD         : GitHub Actions + ECR + ECS