CRUD met Server Actions
Voer Create-, Read-, Update- en Delete-bewerkingen (CRUD) uit op uw database met Server Actions.
CRUD met Server Actions is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
CRUD: databasebewerkingen eenvoudig gemaakt
Welkom bij CRUD-bewerkingen met Next.js Server Actions! CRUD staat voor Create, Read, Update en Delete: de vier fundamentele bewerkingen voor interactie met elke database.
Met Server Actions kun je deze bewerkingen rechtstreeks op de server uitvoeren. Zo blijft je clientbundel klein en verbeter je de beveiliging.
Samenvatting: Prisma en Server Actions
In de vorige les hebben we Prisma ingesteld. We gebruiken Prisma Client om met onze database te werken. Onthoud dat Server Actions asynchrone functies zijn die op de server worden uitgevoerd.
Je kunt ze rechtstreeks in een component definiëren of in een afzonderlijk bestand actions.js. In onze voorbeelden gebruiken we een eenvoudig model Post.
Create: nieuwe gegevens toevoegen
Laten we beginnen met Create. Hierbij voeg je een nieuw record toe aan je database. We maken een eenvoudig formulier dat een Server Action gebruikt om een nieuw bericht toe te voegen.
Let erop dat het kenmerk action van het formulier rechtstreeks onze serverfunctie aanroept. Hierdoor is er geen JavaScript aan de clientkant nodig om het formulier te verzenden.
Create: codevoorbeeld
Zo maak je een nieuw bericht met een Server Action. We importeren onze Prisma-client en gebruiken de methode create.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export default function CreatePostPage() {
async function createPost(formData: FormData) {
'use server';
const title = formData.get('title') as string;
const content = formData.get('content') as string;
await prisma.post.create({
data: { title, content, published: false },
});
revalidatePath('/posts'); // Refresh the posts list
}
return (
<form action={createPost}>
<input type="text" name="title" placeholder="Title" />
<textarea name="content" placeholder="Content"></textarea>
<button type="submit">Add Post</button>
</form>
);
}Read: bestaande gegevens ophalen
Met de bewerking Read haal je gegevens uit je database op. In de App Router van Next.js kun je gegevens rechtstreeks in servercomponenten ophalen.
Dit betekent dat je logica voor het ophalen van gegevens op de server wordt uitgevoerd voordat de component naar de client wordt gestuurd, waardoor de eerste laadtijd korter wordt.
Read: codevoorbeeld
Dit is een servercomponent die alle berichten ophaalt en weergeeft. De aanroep await prisma.post.findMany() wordt volledig op de server uitgevoerd.
import { prisma } from '@/lib/prisma';
export default async function PostsPage() {
const posts = await prisma.post.findMany();
return (
<div>
<h1>All Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<b>{post.title}</b>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}Update: records wijzigen
Met Update-bewerkingen wijzig je bestaande records. Meestal identificeer je het record aan de hand van de unieke ID en geef je daarna de nieuwe gegevens op.
Net als bij Create kan een updateactie worden gestart door een formulier te verzenden of op een knop te klikken, waarna logica aan de serverkant wordt uitgevoerd.
Update: codevoorbeeld
Deze Server Action werkt de publicatiestatus van een bericht bij. We identificeren het bericht aan de hand van id en gebruiken de Prisma-methode update.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function updatePostStatus(id: number, published: boolean) {
'use server';
await prisma.post.update({
where: { id },
data: { published: !published },
});
revalidatePath('/posts');
}
// Example usage in a component:
// <button onClick={() => updatePostStatus(post.id, post.published)}>
// Toggle Publish
// </button>Delete: gegevens verwijderen
Tot slot verwijdert Delete een record uit de database. Dit wordt vaak gestart met een knop en vereist de unieke identificatie van het record.
Wees altijd voorzichtig met verwijderbewerkingen, omdat ze meestal onomkeerbaar zijn!
Delete: codevoorbeeld
Dit is een Server Action om een bericht te verwijderen. We gebruiken prisma.post.delete met een where-clausule om aan te geven welk record moet worden verwijderd.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function deletePost(id: number) {
'use server';
await prisma.post.delete({
where: { id },
});
revalidatePath('/posts'); // Refresh the posts list
}
// Example usage in a component:
// <button onClick={() => deletePost(post.id)}>
// Delete Post
// </button>Controle van CRUD-bewerkingen
Je hebt de vier belangrijkste CRUD-bewerkingen geleerd. Welke bewerking gebruik je om bestaande gegevens uit de database op te halen?
Samenvatting: CRUD met acties
Vandaag heb je geleerd hoe je Create-, Read-, Update- en Delete-bewerkingen (CRUD) uitvoert met Next.js Server Actions en Prisma.
- Create: nieuwe records toevoegen.
- Read: records uit de database ophalen.
- Update: bestaande records wijzigen.
- Delete: records verwijderen.
Server Actions maken deze bewerkingen efficiënt en veilig doordat ze rechtstreeks op de server worden uitgevoerd. Vaak heb je revalidatePath nodig om de gebruikersinterface na wijzigingen bij te werken. Vervolgens bekijken we databasemigraties voor schema's!
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “CRUD met Server Actions” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “CRUD met Server Actions”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
Wat leer ik in “CRUD met Server Actions”?
Voer Create-, Read-, Update- en Delete-bewerkingen (CRUD) uit op uw database met Server Actions. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?
Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “CRUD met Server Actions”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?
Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Prisma ORM instellen
- CRUD met Server Actions
- Migraties van databaseschema's
- Database seeden en connection pooling