So erstellen Sie im Jahr 2026 eine Echtzeit-App mit Next.js und Supabase

Supabase Bietet eine PostgreSQL-Datenbank, Authentifizierung und Echtzeitabonnements als verwaltetes Backend – perfekt kombinierbar mitNext.js zum schnellen Erstellen von Full-Stack-Echtzeit-Apps. In diesem Leitfaden wird eine Echtzeit-App von der Datenbank bis zur Bereitstellung erstellt.

Warum Next.js + Supabase?

• Vollständiges Backend, ohne eines zu erstellen: Datenbank, Authentifizierung, Speicherung und Echtzeit sofort einsatzbereit
• Echtes PostgreSQL: Keine proprietäre Datenbank – Standard-SQL, das Sie direkt abfragen können
• Echtzeitabonnements: Hören Sie Datenbankänderungen live mit minimalem Code
• Integrierte Authentifizierung: E-Mail, OAuth, magische Links – keine Authentifizierungsinfrastruktur zum Aufbau
• Open Source: Selbsthosting, Vermeidung einer Anbieterbindung

Einrichtung

npx create-next-app@latest my-app
cd my-app
npm install @supabase/supabase-js @supabase/ssr

# Create a project at supabase.com, then add to .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Supabase-Client-Setup

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

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

Erstellen Sie eine Tabelle (SQL-Editor in Supabase)

-- Create a messages table
create table messages (
  id uuid default gen_random_uuid() primary key,
  content text not null,
  user_id uuid references auth.users,
  created_at timestamptz default now()
);

-- Enable Row Level Security
alter table messages enable row level security;

-- Policy: anyone can read messages
create policy "Messages are viewable by everyone"
  on messages for select using (true);

-- Policy: authenticated users can insert their own messages
create policy "Users can insert their own messages"
  on messages for insert
  with check (auth.uid() = user_id);

Echtzeit-Abonnements

// components/Chat.jsx
'use client';
import { useState, useEffect } from 'react';
import { supabase } from '@/lib/supabase';

export default function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // Load existing messages
    supabase.from('messages').select('*').order('created_at')
      .then(({ data }) => setMessages(data || []));

    // Subscribe to new messages in real time
    const channel = supabase
      .channel('messages')
      .on('postgres_changes',
        { event: 'INSERT', schema: 'public', table: 'messages' },
        (payload) => {
          setMessages(prev => [...prev, payload.new]);
        }
      )
      .subscribe();

    // Cleanup subscription
    return () => { supabase.removeChannel(channel); };
  }, []);

  const sendMessage = async (content) => {
    const { data: { user } } = await supabase.auth.getUser();
    await supabase.from('messages').insert({ content, user_id: user.id });
  };

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

Authentifizierung

// Sign up
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({ email, password });
  if (error) throw error;
  return data;
}

// Sign in
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({ email, password });
  if (error) throw error;
  return data;
}

// OAuth (Google, GitHub, etc.)
async function signInWithGitHub() {
  await supabase.auth.signInWithOAuth({ provider: 'github' });
}

// Get current user
const { data: { user } } = await supabase.auth.getUser();

// Sign out
await supabase.auth.signOut();

Serverkomponenten und Datenabruf

// app/page.jsx - Server Component fetching data
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    { cookies: { get: (name) => cookieStore.get(name)?.value } }
  );

  const { data: messages } = await supabase
    .from('messages')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(20);

  return <MessageList initialMessages={messages} />;
}

Sicherheit auf Zeilenebene: Der Schlüssel zu sicheren Daten

Supabase verwendet PostgreSQL Row Level Security (RLS), um den Datenzugriff zu kontrollieren. Da sich der Client direkt mit dem anonymen Schlüssel verbindet, sorgen RLS-Richtlinien für die Sicherheit der Daten – sie legen fest, wer was lesen/schreiben kann. Aktivieren Sie RLS immer für Ihre Tabellen und schreiben Sie Richtlinien. Ohne RLS sind Ihre Daten offengelegt. RLS ist für die Produktion nicht optional – es ist die Sicherheitsgrundlage des Direkt-Client-Modells.

Bereitstellung

# Deploy to Vercel (seamless with Next.js)
# 1. Push to GitHub
# 2. Import the repo in Vercel
# 3. Add environment variables (NEXT_PUBLIC_SUPABASE_URL, ANON_KEY)
# 4. Deploy

# Supabase is already hosted - no backend deployment needed.
# Your Next.js frontend on Vercel + Supabase backend = full-stack app live.

Häufig gestellte Fragen

F: Ist Supabase eine gute Alternative zum Aufbau meines eigenen Backends?
A: Ja, für viele Apps – es bietet eine echte PostgreSQL-Datenbank, Authentifizierung, Speicherung und Echtzeit, ohne eine Backend-Infrastruktur aufzubauen. Sie erhalten Standard-SQL (keine proprietäre Datenbank), sodass Sie nicht an die Lösung gebunden sind. Es eignet sich hervorragend für schnelle Full-Stack-Entwicklung und MVPs.

F: Wie funktioniert Echtzeit in Supabase?
A: Supabase hört auf PostgreSQL-Änderungen und überträgt sie über WebSockets an abonnierte Clients. Sie abonnieren INSERT/UPDATE/DELETE-Ereignisse für eine Tabelle und Ihr Rückruf wird ausgelöst, wenn sich Daten ändern. Mit minimalem Code erhalten Sie Live-Updates – ideal für Chat, Benachrichtigungen und Funktionen für die Zusammenarbeit.

F: Ist es sicher, Supabase direkt vom Client aus zu verwenden?
A: Ja, WENN Sie Row Level Security (RLS) verwenden. Da der Client eine Verbindung mit dem anonymen Schlüssel herstellt, steuern RLS-Richtlinien, was jeder Benutzer lesen/schreiben kann. Aktivieren Sie immer RLS und schreiben Sie Richtlinien – das ist die Sicherheitsgrundlage. Ohne RLS sind Ihre Daten offengelegt. Überspringen Sie es niemals in der Produktion.

F: Supabase oder Firebase?
A: Supabase verwendet PostgreSQL (Standard-SQL, relational, kein Lock-in) und ist Open Source/selbsthostbar. Firebase verwendet eine proprietäre NoSQL-Datenbank. Wählen Sie Supabase, wenn Sie SQL, relationale Daten und die Vermeidung von Lock-in bevorzugen; Firebase für sein ausgereiftes Ökosystem und ob NoSQL zu Ihren Daten passt. Beide bieten Authentifizierung und Echtzeit.

F: Kann ich Supabase selbst hosten?
A: Ja – Supabase ist Open Source und kann selbst gehostet werden, wodurch eine Anbieterbindung vermieden wird. Die meisten beginnen mit der verwalteten Cloud (großzügiges kostenloses Kontingent) und können sich bei Bedarf später selbst hosten. Die Selbsthosting-Option ist ein entscheidender Vorteil gegenüber geschlossenen Alternativen.

Fazit

Next.js + Supabase ist eine leistungsstarke und schnelle Möglichkeit, im Jahr 2026 Full-Stack-Echtzeit-Apps zu erstellen. Supabase bietet einechte PostgreSQL-Datenbank, integrierte Authentifizierung und Echtzeit-Abonnements – nahtlose Kopplung mit Next.js. Der Arbeitsablauf: Erstellen Sie Tabellen mit SQL, aktivieren Sie die Zeilenebenensicherheit mit Richtlinien (wichtig für den sicheren direkten Clientzugriff), abonnieren Sie Änderungen in Echtzeit und verwenden Sie die Supabase-Authentifizierung für Benutzer. Stellen Sie das Next.js-Frontend auf Vercel bereit, und da Supabase bereits gehostet wird, steht Ihnen eine Full-Stack-App zur Verfügung, ohne dass Sie eine Backend-Infrastruktur verwalten müssen. Die wichtigste Sicherheitsregel ist die ständige Aktivierung von RLS – es sorgt für die Sicherheit Ihrer direkt abgerufenen Daten. Für Chat, Tools für die Zusammenarbeit, Dashboards und MVPs können Sie mit diesem Stack bemerkenswert schnell Echtzeit-Full-Stack-Apps erstellen, ohne ein Backend erstellen oder verwalten zu müssen.