Supabase + Next.js Skill Next.js App Router patterns with Supabase Auth and Drizzle ORM. Sources: [Supabase Next.js Guide](https://supabase.com/docs/guides/auth/server side/nextjs) [Drizzle + Supabase](https://supabase.com/docs/guides/database/drizzle) Core Principle Drizzle for queries, Supabase for auth/storage, server components by default. Use Drizzle ORM for type safe database access. Use Supabase client for auth, storage, and realtime. Prefer server components; use client components only when needed. Project Structure Setup Install Dependencies Environment Variables Drizzle Setup drizzle.config.ts src/db/index.ts src/db/schema.ts Supabase Clients src/lib/supabase/client.ts (Browser) src/lib/supabase/server.ts (Server Components/Actions) src/lib/supabase/middleware.ts (For Middleware) Middleware src/middleware.ts Auth Helpers src/lib/auth.ts Auth Pages src/app/(auth)/login/page.tsx src/components/auth/login form.tsx src/app/(auth)/callback/route.ts Server Actions src/app/actions/posts.ts Data Fetching src/db/queries/posts.ts In Server Components Storage Upload Component Get Public URL Realtime Client Component with Subscription OAuth Providers src/components/auth/oauth buttons.tsx Sign Out Server Action Sign Out Button Anti Patterns Using Supabase client for DB queries Use Drizzle for type safety Fetching in client components Prefer server components Not using middleware for auth Session refresh is critical Calling cookies() synchronously Must await in Next.js 15+ Service key in client Never expose, server only Missing revalidatePath Always revalidate after mutations Not handling auth errors Show user friendly messages

supabase-nextjs