nextjs-supabase

Next.js + Supabase Stack

Overview

Layer	Technology	Purpose
Framework	Next.js 15	App Router, Server Components
Backend	Supabase	Auth, Database, Storage, Realtime
Styling	Tailwind CSS	Utility-first CSS
Components	shadcn/ui	Accessible UI components
Language	TypeScript	Type safety

Related rules: nextjs-15.mdc, supabase.mdc, tailwind.mdc, shadcn-ui.mdc

---

Project Structure

app/
├── (auth)/
│   ├── login/
│   │   └── page.tsx
│   ├── signup/
│   │   └── page.tsx
│   └── auth/
│       └── callback/
│           └── route.ts
├── (dashboard)/
│   ├── layout.tsx
│   └── dashboard/
│       └── page.tsx
├── layout.tsx
├── page.tsx
└── globals.css
components/
├── ui/                   # shadcn/ui components
└── ...
lib/
├── supabase/
│   ├── client.ts         # Browser client
│   ├── server.ts         # Server client
│   └── middleware.ts     # Auth middleware helper
└── utils.ts
supabase/
├── migrations/           # Database migrations
└── config.toml          # Local config
types/
└── supabase.ts          # Generated types

---

Supabase Client Setup

Browser Client

// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'
import type { Database } from '@/types/supabase'

export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

Server Client

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import type { Database } from '@/types/supabase'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Called from Server Component - ignore
          }
        },
      },
    }
  )
}