Verbindung einer Supabase-Datenbank mit einer schönen, in v0 erstellten Benutzeroberfläche
makedream6 de mayo de 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Das v0-Tool von Vercel entwirft im Handumdrehen großartige Next.js-Benutzeroberflächen. Doch wenn Sie es dabei belassen, bleibt es nur eine nutzlose Hülle. Sobald Sie die Seite neu laden, verschwinden die vom Benutzer eingegebenen Daten spurlos. Um einen wirklich funktionierenden Dienst zu erstellen, benötigen Sie eine Datenbank zum Speichern dieser Daten.
Ohne einen Entwickler für viel Geld einstellen zu müssen, können Sie die Scheindaten von v0 selbst entfernen und Supabase anbinden, um ein funktionierendes Backend aufzubauen. Hier sind die einzelnen Schritte dafür zusammengefasst.
Im von v0 generierten Code befinden sich meist Scheindaten im Format const mockData = [...]. Der erste Schritt besteht darin, die Struktur dieser Daten zu verstehen. Sie müssen die auf dem Bildschirm angezeigten Informationen und die vom Benutzer ausgefüllten Felder exakt in eine Datenbanktabelle übertragen.
Um zu verhindern, dass Datenstrukturen durcheinandergeraten und falsche Werte gespeichert werden, müssen Sie die Datentypen klar definieren. Auch ohne SQL-Kenntnisse können Sie eine Tabelle entwerfen, wenn Sie diese fünf Regeln beachten:
uuid von PostgreSQL und legen Sie gen_random_uuid() als Standardwert fest, damit automatisch eine eindeutige Zeichenfolge generiert wird.text zu und aktivieren Sie UNIQUE (um doppelte Registrierungen zu verhindern) sowie NOT NULL (damit das Feld nicht leer gelassen werden kann).numeric zu, um Nachkommastellen präzise und ohne Rundungsfehler zu speichern.text, aber beschränken Sie die Eingabe auf vordefinierte Werte wie "Wartend" oder "Abgeschlossen".timestamptz zu, der auch Zeitzoneninformationen speichert, und setzen Sie den Standardwert auf now(), damit die aktuelle Zeit beim Erstellen des Datensatzes automatisch eingetragen wird.Mit Supabase können Sie über ein paar Mausklicks im Webbrowser eine Datenbank erstellen, ohne eine komplexe Serverinfrastruktur aufbauen zu müssen.
messages oder users und fügen Sie die erforderlichen Spalten gemäß den oben genannten Mapping-Kriterien hinzu.Sobald die Datenbank erstellt ist, müssen Sie den Kommunikationsweg zwischen Ihrem Next.js-Projektordner und Supabase einrichten. Wenn der geheime Datenbankschlüssel an einem öffentlichen Ort wie GitHub offengelegt wird, gerät Ihr gesamter Dienst außer Kontrolle. Aus diesem Grund müssen Umgebungsvariablen separat aufbewahrt werden.
Erstellen Sie eine Datei namens .env.local im Stammverzeichnis Ihres Next.js-Projekts und fügen Sie den folgenden Code ein. Kopieren Sie die URL und die Schlüsselwerte von der Seite Settings > API im Supabase-Dashboard.