For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /de/docs/web/first-feature.md (or send Accept: text/markdown).

Dein erstes Feature bauen

Ein durchgängiger Weg vom Schema bis zum ausgelieferten Screen.

Zu dieser Anleitung fragen

Schritt-für-Schritt für Einsteiger

Voraussetzungen: Lesen Sie die beiden folgenden Einsteigerhandbücher, schließen Sie die lokale Web-Einrichtung ab und öffnen Sie dieses Monorepo im Stammverzeichnis in Ihrem Editor. Webeinstellungen gehören in apps/web/.env.local; Next.js liest das Stammverzeichnis .env nicht. /dashboard im Standard-Fake-Modus ist eine Demo ohne Datenbank; /auth benötigt eine migrierte Datenbank.

Kurze Begriffe: Ein Arbeitsbereich umfasst die einzelnen Benutzer, Daten und Einstellungen eines Teams. Der Server ist das vertrauenswürdige Backend; Halten Sie Anbieterschlüssel aus Browser- und Telefoncodes fern. Eine Migration ist eine versionierte Datenbankänderung, die Tabellen erstellt oder aktualisiert. Ein KI-Modell ist der Motor, der antwortet; Der Modellkatalog ist die Liste der verfügbaren Modell-IDs und Preise des Servers. Ein Anbieter ist ein externer Dienst wie ein KI-, E-Mail- oder Abrechnungsdienst. Eine Berechtigung ist eine Bewilligung, die einem Arbeitsbereich die Nutzung einer Funktion ermöglicht. Ein Webhook ist eine Nachricht, die ein Dienst an den URL eines anderen Dienstes sendet.

1. Öffnen Sie VS Code im Repository-Stammverzeichnis und bitten Sie Ihren Programmieragenten, apps/web/app/reports/page.tsx und apps/web/src/reports.ts zu erstellen. Geben Sie ihm die Berichtsfelder und zulässigen Rollen; erfordern serverseitige Mitgliedschaftsprüfungen und eine nach workspaceId gefilterte Abfrage.

2. Öffnen Sie /reports als angemeldetes Mitglied und bestätigen Sie, dass nur die Datensätze dieses Arbeitsbereichs angezeigt werden.

3. Versuchen Sie es mit einem abgemeldeten Konto und einem zweiten Workspace-Konto. Wenn einer der beiden die Datensätze lesen kann, stoppen Sie die Serverprüfung und beheben Sie sie.

Beginnen Sie für benutzerdefinierten Code mit dem bereitgestellten prompts/README.md und kopieren Sie die nächstgelegene Eingabeaufforderung: prompts/new-app-screen.md für einen App-Bildschirm oder prompts/new-landing-page.md für eine öffentliche Seite. Geben Sie Ihrem Programmieragenten für Server-, Datenbank- oder Anbieterarbeiten die Aufgabe dieses Handbuchs und bitten Sie ihn, AGENTS.md, .ai/PROJECT_CONTEXT.md und passende .ai/-Spiegel zu lesen; Überprüfen Sie die hier genannten genauen Quelldateien. Listen Sie Dateien auf und prüfen Sie sie vor der Bearbeitung. Bewahren Sie den Arbeitsbereichseigentum und die Nur-Server-Geheimnisse. und zeige dir den Unterschied. Teilen Sie ihm das gewünschte Verhalten, Eingabe- und Ausgabefelder, zulässige Rollen, erwartete Erfolge und Fehler sowie das Testkonto, den Anbieter oder das Gerät mit. Beispielwerte verwenden; Fügen Sie niemals ein echtes Geheimnis ein.

Route erstellen

Fügen Sie eine Seite unter apps/web/app/ hinzu. Beginnen Sie mit der Dashboard- oder Inhaltsroute, um deren Sitzungs- und aktiven Workspace-Auflösung wiederzuverwenden. Eine Route entsteht, wenn ihr Ordner page.tsx enthält; verwenden Sie für geschützte Lesezugriffe eine Server-Komponente.

apps/web/app/reports/page.tsx
apps/web/src/reports.ts
.ai/apps/web/app/reports/page.md
.ai/apps/web/src/reports.md

Zuständigkeit auf dem Server auflösen

Lesen Sie die angemeldete Identität und den aktiven Workspace über die vorhandenen Auth- und Workspace-Hilfsfunktionen aus. Prüfen Sie die Mitgliedschaft, bevor Sie Datensätze laden. Filtern Sie jede Abfrage nach der aufgelösten workspaceId; übernehmen Sie niemals eine Eigentümer-ID aus einem Formular oder einer Modellausgabe.

Prüfen Sie für Verwaltungsaktionen die Berechtigung von Ownern oder Admins. Ist eine Funktion kostenpflichtig, prüfen Sie ihre Berechtigung an der Lese- oder Aktionsgrenze, bevor Sie geschützte Daten zurückgeben; ein ausgeblendeter Button erzwingt keinen Zugriffsschutz.

Zugriff und Wiederherstellung prüfen

Testen Sie anonymen Zugriff, ein gültiges Mitglied, ein Mitglied eines anderen Workspace, eine widerrufene Sitzung und die erforderliche Rolle. Ergänzen Sie leere und fehlgeschlagene Ladezustände um eine Wiederherstellungsaktion. Nehmen Sie die Route nicht in die öffentliche Sitemap auf und ergänzen Sie ihr Präfix in den robots-Sperrregeln.

Den Record modellieren

Jeder Produkt-Record beginnt im Datenbankschema. Lege in packages/db eine Tabelle mit workspaceId-Spalte an, generiere die Migration und schreibe die Repository-Helper, die den Workspace vor jedem Lesen oder Schreiben auflösen.

// packages/db/src/schema.ts
export const ideas = pgTable("idea", {
  id: uuid().primaryKey(),
  workspaceId: uuid().notNull().references(() => workspaces.id),
  title: text().notNull(),
  createdAt: timestamp().defaultNow(),
});

corepack pnpm --filter @supastack/db db:generate

Die Aktion autorisieren

Erstelle eine Server Action, die in dieser Reihenfolge Session, Workspace und Entitlement auflöst. Validiere die Eingabe mit einem zod-Schema, führe die Mutation über das Repository aus und gib ein typisiertes Ergebnis zurück, das die Oberfläche rendern kann.

Die Reihenfolge zählt: Eine Mutation, die schreibt, bevor die Workspace-Zugehörigkeit geprüft ist, hat die Grenze bereits überschritten. Leite Ownership auf dem Server ab — traue niemals einer Workspace-ID aus dem Browser.

Die Oberfläche komponieren

Baue die Seite aus geteilten Komponenten und Tokens — die Blocks und ui-web-Primitives des Kits decken die üblichen Muster ab. Behandle Loading-, Error- und Empty-States; ein Feature, das nur den Happy Path rendert, ist nicht fertig.