# Stack: Next.js + Supabase

> MORPH-SPEC stack for .NET 10 Minimal API + Next.js 15 + Supabase Cloud + EasyPanel (VPS)

## When to Use This Stack

| Criteria | This Stack | Blazor+Azure Stack |
|----------|------------|-------------------|
| Frontend | React/Next.js (SSR + CSR) | Blazor Server (C# only) |
| Database | Supabase Cloud (PostgreSQL) | Azure SQL |
| Auth | Supabase Auth (built-in) | Azure Identity / Clerk |
| Deploy | VPS + EasyPanel (Docker) | Azure Container Apps |
| Cost (dev) | ~$6/month | ~$15/month |
| Cost (prod) | ~$31/month | ~$50+/month |
| Best for | MVPs, SaaS, AI apps (pgvector) | Enterprise, full-.NET teams |
| Realtime | Supabase Realtime (PostgreSQL) | SignalR |
| Vector search | pgvector (native) | Azure AI Search |

## Architecture

```
Browser
  |
  v
Next.js 15 (App Router)          Supabase Cloud
  |-- Server Components --------> Auth (JWT validation)
  |-- Client Components --------> PostgREST (direct queries via RLS)
  |-- Route Handlers (BFF) -----> .NET 10 API --> PostgreSQL + pgvector
  |                                              Storage
  v                                              Realtime
EasyPanel (VPS)
  |-- Next.js Container (:3000)
  |-- .NET API Container (:8080)
  |-- Nginx reverse proxy (:443)
```

## Quick Start

### 1. Copy stack to your project

```bash
cp -r stacks/nextjs-supabase/.morph/ your-project/.morph/
cp -r stacks/nextjs-supabase/.claude/ your-project/.claude/
cp stacks/nextjs-supabase/CLAUDE.md your-project/CLAUDE.md
```

### 2. Configure

Edit `.morph/project.md` with your project details.

### 3. Start developing

```bash
/morph-proposal my-feature
```

## Directory Structure

```
stacks/nextjs-supabase/
├── CLAUDE.md                           # Stack-specific Claude instructions
├── README.md                           # This file
├── .morph/
│   ├── project.md                      # Project template
│   └── config/
│       └── agents.json                 # 12 agents configured
│   # Note: All standards moved to framework/standards/ (universal knowledge)
│   ├── templates/                      # 11 templates
│   └── examples/                       # 2 reference examples
│       ├── crud-nextjs-supabase/
│       └── saas-nextjs-supabase/
└── .claude/
    └── skills/                         # 4 agent skills
        └── level-2-domains/
            ├── integrations/supabase-expert.md
            ├── infrastructure/easypanel-deployer.md
            ├── backend/dotnet-supabase.md
            └── frontend/nextjs-supabase.md
```

## Key Differences from Blazor+Azure

| Aspect | Blazor+Azure | Next.js+Supabase |
|--------|-------------|-----------------|
| IaC | Bicep templates | Dockerfiles + Docker Compose |
| ORM | EF Core (LINQ) | Npgsql + Dapper (SQL) |
| Migrations | C# EF Migrations | SQL (Supabase CLI) |
| Auth middleware | Azure Identity | @supabase/ssr + JWT |
| RLS | Application-level | Database-level (PostgreSQL RLS) |
| File storage | Azure Blob Storage | Supabase Storage |
| Deploy | Azure Container Apps | EasyPanel (VPS Docker) |

## Shared with Blazor+Azure

- MORPH-SPEC 5-phase workflow (Setup > Design > Clarify > Tasks > Implement)
- Framework standards: coding.md, architecture.md
- CLI commands: /morph-proposal, /morph-apply, /morph-status
- Validation pipeline and checkpoint system
- .NET 10 backend patterns (C# 14, sealed records, CancellationToken)

---

*MORPH-SPEC by Polymorphism Tech*
