Vibe Coding Full-Stack: Construye un SaaS con Next.js, Supabase y Cursor

Por Sarah Lin • Intermediate • 20 min read • Actualizado 2026-09-12

Lo Que Dominarás en Este Tutorial

Configure Cursor Composer to orchestrate multi-file full-stack edits across frontend and backend.
Prompt AI to generate relational PostgreSQL schemas with strict Supabase Row Level Security (RLS).
Implement type-safe Server Actions with Zod validation and optimistic UI updates.
Safely handle Stripe webhook lifecycle events and database synchronizations.

1. Architecting the Multi-File Prompt in Cursor Composer

Cursor Composer allows editing dozens of project files simultaneously. To get production-grade output, structure your master prompt with clear architectural roles, dependency versions, and security constraints.

MARKDOWN

# Master Composer Prompt:
"""
You are an expert Next.js 15 and Supabase architect.
Task: Build an authenticated subscription dashboard for our developer analytics platform.

Files to create / modify:
1. app/dashboard/page.tsx: Server component fetching metrics from Supabase.
2. app/actions/billing.ts: Server Action creating a Stripe customer portal session.
3. supabase/migrations/20260912_metrics.sql: Table definition with strict RLS policies.

Requirements:
- Next.js 15 App Router with TypeScript strict mode.
- Use Supabase SSR client (@supabase/ssr).
- Enforce RLS: users can only SELECT and INSERT rows matching auth.uid().
- Handle loading and error boundaries gracefully.
"""

Nota: Golden Rule: List the exact files you want created or modified to prevent the AI from scattering logic into arbitrary directories.

2. Bulletproof Supabase RLS Generation

AI models frequently forget database security unless explicitly prompted. Always verify that generated migrations include Row Level Security and explicit tenant isolation policies.

SQL

-- Generated Supabase Migration: 20260912_metrics.sql
CREATE TABLE public.developer_metrics (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  api_calls_count INTEGER NOT NULL DEFAULT 0,
  latency_p99_ms NUMERIC(6,2) NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Enable Row Level Security (Mandatory)
ALTER TABLE public.developer_metrics ENABLE ROW LEVEL SECURITY;

-- Policy: Users can only read their own metrics
CREATE POLICY "Users can read own metrics"
  ON public.developer_metrics
  FOR SELECT
  USING (auth.uid() = user_id);

-- Policy: Users can insert their own metrics
CREATE POLICY "Users can insert own metrics"
  ON public.developer_metrics
  FOR INSERT
  WITH CHECK (auth.uid() = user_id);

Nota: Security Warning: Never deploy an AI-generated database migration without verifying that ENABLE ROW LEVEL SECURITY is executed.

Evaluación Rápida: Pon a Prueba tus Conocimientos

1. Why is Row Level Security (RLS) critical when building with Supabase and AI?