# Supabase Nextjs

Next.js with Supabase and Drizzle ORM

- Repository: https://github.com/alinaqi/maggy (710 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-13
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add alinaqi/maggy --skill supabase-nextjs -g -a claude-code -y`
Codex: `npx skills add alinaqi/maggy --skill supabase-nextjs -g -a codex -y`
Cursor: `npx skills add alinaqi/maggy --skill supabase-nextjs -g -a cursor -y`
Gemini CLI: `npx skills add alinaqi/maggy --skill supabase-nextjs -g -a gemini-cli -y`

## Description

Next.js with Supabase and Drizzle ORM

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```
project/
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   │   ├── login/page.tsx
│   │   │   ├── signup/page.tsx
│   │   │   └── callback/route.ts
│   │   ├── (dashboard)/
│   │   │   └── page.tsx
│   │   ├── api/
│   │   │   └── [...]/route.ts
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── auth/
│   │   └── ui/
│   ├── db/
│   │   ├── index.ts              # Drizzle client
│   │   ├── schema.ts             # Schema definitions
│   │   └── queries/              # Query functions
│   ├── lib/
│   │   ├── supabase/
│   │   │   ├── client.ts         # Browser client
│   │   │   ├── server.ts         # Server client
│   │   │   └── middleware.ts     # Auth middleware helper
│   │   └── auth.ts               # Auth helpers
│   └── middleware.ts             # Next.js middleware
├── supabase/
│   ├── migrations/
│   └── config.toml
├── drizzle.config.ts
└── .env.local
```

---

## Setup

### Install Dependencies
```bash
npm install @supabase/supabase-js @supabase/ssr drizzle-orm postgres
npm install -D drizzle-kit
```

### Environment Variables
```bash
# .env.local
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=<from supabase start>

# Server-side only
SUPABASE_SERVICE_ROLE_KEY=<from supabase start>
DATABASE_URL=postgresql://postgres:postgres@localhost:54322/postgres
```

---

## Drizzle Setup

The rest: https://github.com/alinaqi/maggy/blob/HEAD/skills/supabase-nextjs/SKILL.md