Supabase mit Cursor: KI-gesteuerte Backend-as-a-Service-Entwicklung

Supabase bietet eine leistungsstarke Open-Source-Alternative zu Firebase für moderne Anwendungen. Kombiniert mit den KI-Funktionen von Cursor können Sie schnell Authentifizierung, Datenbank, Echtzeit-Abonnements und serverlose Funktionen einrichten. Dieser Leitfaden deckt Supabase-Workflows mit Cursor ab.

Voraussetzungen

Bevor Sie beginnen:

• Cursor installiert (neueste Version empfohlen)
• Supabase-Konto (Free-Tier reicht aus)
• Supabase CLI installiert für lokale Entwicklung

Projekt-Setup

Supabase initialisieren

# Supabase CLI installieren
npm install -g supabase

# Einloggen
supabase login

# Projekt initialisieren
supabase init

# Mit Ihrem Projekt verknüpfen
supabase link --project-ref your-project-ref

Client installieren

npm install @supabase/supabase-js
npm install -D @supabase/cli

Umgebungsvariablen

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Datenbankschema-Design

Tabellen mit KI designen

Entwerfe Supabase-Tabellen für eine Blog-Anwendung:
- Posts (mit Kategorien, Autor-Relation)
- Kommentare (verschachtelte Antworten)
- Benutzerprofile (erweitert auth.users)

Cursor generiert SQL:

-- RLS aktivieren
alter table auth.users enable row level security;

-- Profil-Tabelle
CREATE TABLE profiles (
  id uuid references auth.users on delete cascade primary key,
  username text unique not null,
  avatar_url text,
  created_at timestamptz default now()
);

-- Post-Tabelle
CREATE TABLE posts (
  id bigint generated always as identity primary key,
  title text not null,
  slug text unique not null,
  content text not null,
  status text default 'draft',
  author_id uuid references profiles(id) not null,
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

-- Kommentar-Tabelle
CREATE TABLE comments (
  id bigint generated always as identity primary key,
  post_id bigint references posts(id) on delete cascade,
  parent_id bigint references comments(id) on delete cascade,
  author_id uuid references profiles(id),
  content text not null,
  created_at timestamptz default now()
);

Authentifizierungs-Integration

Next.js-Authentifizierung

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });
  const { data: { session } } = await supabase.auth.getSession();
  return res;
}

Geschützte Routen

// app/dashboard/page.tsx
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';

export default async function Dashboard() {
  const supabase = createServerComponentClient({ cookies });
  const { data: { session } } = await supabase.auth.getSession();

  if (!session) {
    redirect('/login');
  }

  return <div>Welcome {session.user.email}</div>;
}

Zeilensicherheit (RLS)

Richtlinien-Generierung

-- Benutzer können nur ihr eigenes Profil sehen
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT
  USING (auth.uid() = id);

-- Benutzer können nur ihr eigenes Profil aktualisieren
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE
  USING (auth.uid() = id);

-- Veröffentlichte Posts sind für alle sichtbar
CREATE POLICY "Published posts are viewable"
  ON posts FOR SELECT
  USING (status = 'published');

Echtzeit-Abonnements

Client-Abonnement

'use client';

import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';

export function RealtimeComments({ postId }: { postId: string }) {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const channel = supabase
      .channel('comments')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'comments',
          filter: `post_id=eq.${postId}`,
        },
        (payload) => {
          setComments((prev) => [...prev, payload.new]);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [postId]);

  return (
    <div>
      {comments.map((comment) => (
        <div key={comment.id}>{comment.content}</div>
      ))}
    </div>
  );
}

Edge Functions

Function erstellen

// supabase/functions/process-payment/index.ts
import { serve } from 'https://deno.land/[email protected]/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';

serve(async (req) => {
  const { amount, currency } = await req.json();

  const supabase = createClient(
    Deno.env.get('SUPABASE_URL')!,
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
  );

  // Zahlungslogik verarbeiten
  const result = await processPayment({ amount, currency });

  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' },
  });
});

Bereitstellung

supabase functions deploy process-payment

Kurzreferenz

Operation	Befehl/Code
Lokale Umgebung starten	supabase start
Datenbank-Migration	supabase db diff
Typen generieren	supabase gen types
Functions bereitstellen	supabase functions deploy
Logs anzeigen	supabase functions logs

Verwandte Ressourcen

• Cursor Next.js-Leitfaden
• Cursor Datenbankentwicklungsleitfaden
• Cursor TypeScript-Leitfaden

Zuletzt aktualisiert: Juli 2025