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 /nl/docs/web/first-feature.md (or send Accept: text/markdown).

Bouw je eerste feature

Een end-to-end traject van schema naar uitgeleverd scherm.

Vraag over deze handleiding

Walkthrough voor beginners

Vereisten: Lees de twee onderstaande beginnershandleidingen, voltooi de lokale webconfiguratie en open deze monorepo in de root van uw editor. Webinstellingen horen thuis in apps/web/.env.local; Next.js leest de root .env niet. /dashboard in de standaard nepmodus is een demo zonder database; /auth heeft een gemigreerde database nodig.

Korte termen: een werkruimte bestaat uit de afzonderlijke gebruikers, gegevens en instellingen van één team. De server is de vertrouwde backend; houd providersleutels uit de browser- en telefooncode. Een migratie is een versiebeheer van de database, waarbij tabellen worden gemaakt of bijgewerkt. Een AI-model is de motor die antwoord geeft; de modelcatalogus is de serverlijst met beschikbare model-ID's en prijzen. Een provider is een externe service, zoals een AI-, e-mail- of factureringsservice. Een recht is een subsidie waarmee een werkruimte een functie kan gebruiken. Een webhook is een bericht dat de ene service naar de URL van een andere service verzendt.

1. Open VS Code in de root van de repository en vraag uw codeeragent om apps/web/app/reports/page.tsx en apps/web/src/reports.ts te maken. Geef het de rapportvelden en toegestane rollen; vereisen lidmaatschapscontroles aan de serverzijde en een zoekopdracht gefilterd door workspaceId.

2. Open /reports als aangemeld lid en bevestig dat alleen de records van de werkruimte verschijnen.

3. Probeer een afgemeld account en een account voor een tweede werkruimte; als een van beide de records kan lezen, stop dan en repareer de servercontrole.

Voor aangepaste code begint u met de meegeleverde prompts/README.md en kopieert u de dichtstbijzijnde prompt: prompts/new-app-screen.md voor een app-scherm of prompts/new-landing-page.md voor een openbare pagina. Voor server-, database- of providerwerk geeft u uw codeeragent de taak van deze handleiding en vraagt u hem om AGENTS.md, .ai/PROJECT_CONTEXT.md en overeenkomende .ai/-mirrors te lezen; inspecteer de exacte bronbestanden die hier worden genoemd; maak een lijst van bestanden en controleer deze voordat u deze bewerkt; behoud van het eigendom van de werkruimte en geheimen voor de server; en laat je het verschil zien. Vertel het gewenste gedrag, invoer- en uitvoervelden, toegestane rollen, verwacht succes en fouten, en het testaccount, de provider of het apparaat. Gebruik voorbeeldwaarden; plak nooit een echt geheim.

Maak de route

Voeg een pagina toe onder apps/web/app/. Begin vanaf het dashboard of de inhoudsroute, zodat u de sessie- en actieve werkruimteresolutie ervan opnieuw kunt gebruiken. Er bestaat een route als de map page.tsx bevat; gebruik een servercomponent voor beveiligde leesbewerkingen.

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

Los het eigendom op de server op

Lees de ingelogde identiteit en actieve werkruimte via de bestaande verificatie-/werkruimtehelpers. Controleer het lidmaatschap voordat u records laadt. Filter elke vraag op de opgeloste workspaceId; neem nooit een eigenaar-ID uit een formulier of modeluitvoer.

Controleer de eigenaars-/beheerdersrechten voor beheeracties. Wanneer voor een functie wordt betaald, controleer dan of er recht op is bij de lees- of actiegrens voordat beschermde gegevens worden geretourneerd; een verborgen knop dwingt geen toegang af.

Controleer toegang en herstel

Test anonieme toegang, een geldig lid, een lid van een andere werkruimte, een ingetrokken sessie en de vereiste rol. Voeg lege en mislukte laadstatussen toe met een herstelactie. Houd de route buiten de openbare sitemap en voeg het voorvoegsel ervan toe aan robots disallows.

Modelleer de record

Elke productrecord begint in het databaseschema. Voeg een tabel toe in packages/db met een workspaceId-kolom, genereer de migratie en schrijf de repository-helpers die de workspace oplossen vóór lezen of schrijven.

// 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

Autoriseer de actie

Maak een server action die sessie, workspace en entitlement in die volgorde oplost. Valideer invoer met een zod-schema, voer de mutatie uit via de repository en geef een getypeerd resultaat terug dat de interface kan renderen.

De volgorde doet ertoe: een mutatie die schrijft vóór het controleren van workspace-eigendom heeft de grens al overschreden. Leid eigendom af op de server — vertrouw nooit een workspace id die door de browser wordt gestuurd.

Stel het oppervlak samen

Bouw de pagina uit gedeelde componenten en tokens — de blocks van de kit en de ui-web-primitieven dekken de gebruikelijke patronen. Behandel loading-, error- en lege states; een feature die alleen het happy path rendert is niet af.