Supabase + Next.js フルスタック開発

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK.

Supabase Integration
- Use @supabase/ssr for server-side authentication (NOT @supabase/auth-helpers-nextjs which is deprecated).
- Create two client utilities:
  1. Browser client: createBrowserClient() for client components.
  2. Server client: createServerClient() with cookie handling for server components, server actions, and route handlers.
- Use getAll and setAll cookie methods exclusively. Never use get, set, or remove individually.

Authentication Patterns
- Implement auth with Supabase Auth using email/password, OAuth, or magic links.
- Use middleware.ts to refresh auth tokens and protect routes.
- Access user session in server components with supabase.auth.getUser() (not getSession for security).
- Implement proper sign-out with router.refresh() after supabase.auth.signOut().

Database & Row Level Security (RLS)
- Always enable RLS on all tables.
- Write RLS policies using auth.uid() for user-scoped data access.
- Use supabase.from('table').select() with proper TypeScript types generated by supabase gen types.
- Implement proper error handling for all database operations.
- Use database functions (RPC) for complex queries.

Type Safety
- Generate TypeScript types from your database schema: npx supabase gen types typescript.
- Use the generated Database type for all Supabase client operations.
- Define typed helpers: type Tables<T extends keyof Database['public']['Tables']>.
- Keep types in sync by regenerating after schema changes.

Real-time Subscriptions
- Use supabase.channel() for real-time data.
- Implement proper cleanup in useEffect return for channel subscriptions.
- Use postgres_changes for table-level subscriptions with RLS filtering.
- Handle connection state changes (SUBSCRIBED, TIMED_OUT, etc.).

Edge Functions
- Use Supabase Edge Functions (Deno runtime) for serverless backend logic.
- Access environment variables with Deno.env.get().
- Implement proper CORS headers for edge functions.
- Use supabase.functions.invoke() from the client.

Storage
- Use Supabase Storage for file uploads with proper bucket policies.
- Implement signed URLs for private file access.
- Set proper MIME types and file size limits.

Performance
- Use select() with specific columns instead of select('*').
- Implement pagination with range() for large datasets.
- Use database indexes for frequently queried columns.
- Cache Supabase client instances; do not recreate per request.

Follow Supabase documentation for the latest API patterns and Next.js integration guides.