implementing-next.js-with-supabaselisted

# Implementing Next.js with Supabase Interactive guide for implementing features using patterns from `.claude/modules/nextjs-patterns.md` and `.claude/modules/supabase-security.md`. ## Quick Decision: Server or Client Component? Use this decision tree to choose the right component type: **Step 1: Does it need user interaction?** - onClick, onChange, onSubmit handlers? - useState, useEffect, or other React hooks? - Browser APIs (localStorage, window)? → **YES** = Client Component (`'use client'`) → **NO** = Continue to Step 2 **Step 2: Does it fetch data from database/API?** - Supabase queries? - Fetch from external API? - Read from database? → **YES** = Server Component (default) → **NO** = Server Component (default, unless Step 1 was yes) ## Common Scenarios | What You're Building | Component Type | Supabase Client | |---------------------|----------------|-----------------| | Page that displays recipes | Server Component | `@/lib/supabase/server` | | Save/delete button | Client Component | `@/lib/supabase/client` | | Form with validation | Client Component | `@/lib/supabase/client` | | Form with Server Action | Server Component | Use Server Action | | Real-time chat | Client Component | `@/lib/supabase/client` | | Dashboard with data | Server Component | `@/lib/supabase/server` | | API route handler | Server (Route Handler) | `@/lib/supabase/server` | ## Implementation Patterns ### Pattern 1: Server Component with Data Fetching **When:** Displaying data from dat