Basisformulieren met Server Actions
Maak interactieve formulieren die gegevens rechtstreeks naar de server verzenden met Next.js Server Actions.
Basisformulieren met Server Actions is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 1 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.
Introductie tot Server Actions
Welkom bij Server Actions! Met deze krachtige functie van Next.js 15 kun je functies definiëren die rechtstreeks op de server worden uitgevoerd en vanuit je clientcomponenten kunnen worden aangeroepen.
Je kunt ze zien als een manier om gegevens naar je server te sturen zonder een afzonderlijke API-route te maken. Ze vereenvoudigen het wijzigen van gegevens en het indienen van formulieren.
Waarom Server Actions gebruiken?
Server Actions bieden verschillende belangrijke voordelen voor je Next.js-toepassingen:
- Eenvoudiger gegevens wijzigen: roep servercode rechtstreeks vanuit je formulieren aan.
- Minder JavaScript aan de clientzijde: er hoeft minder JavaScript naar de browser te worden gestuurd.
- Betere prestaties: acties worden dichter bij je database uitgevoerd, waardoor de vertraging mogelijk kleiner wordt.
- Automatische revalidatie: na een geslaagde wijziging kunnen ze gecachete gegevens automatisch bijwerken. Hierover leer je meer in een latere les!
Een Server Action definiëren
Een Server Action is een async-functie die is gemarkeerd met de instructie "use server". Deze instructie vertelt Next.js dat de functie uitsluitend als servercode mag worden behandeld.
Je kunt acties rechtstreeks in je componenten definiëren of in een afzonderlijk bestand, bijvoorbeeld app/actions.js, en ze daaruit importeren.
// app/actions.js
"use server";
export async function createItem(formData) {
const itemName = formData.get("itemName");
console.log(`Server received: ${itemName}`);
// In a real app, you'd save 'itemName' to a database
}Een formulier met een actie verbinden
Om een HTML-element <form> aan een Server Action te koppelen, geef je de actiefunctie rechtstreeks door aan de eigenschap action van het formulier. Zo eenvoudig is het!
Wanneer het formulier wordt verzonden, roept Next.js de opgegeven Server Action automatisch aan.
// app/page.js
import { createItem } from './actions';
export default function Page() {
return (
<form action={createItem}>
<label htmlFor="item">New Item:</label>
<input type="text" id="item" name="itemName" required />
<button type="submit">Add Item</button>
</form>
);
}Formuliergegevens openen
Wanneer een formulier gegevens naar een Server Action verzendt, ontvangt de actiefunctie automatisch een object FormData als eerste argument.
Je kunt formData.get('fieldName') gebruiken om de waarde van een invoerveld op te halen op basis van het kenmerk name.
// app/actions.js
"use server";
export async function processForm(formData) {
const username = formData.get("username");
const email = formData.get("email");
const age = formData.get("age");
console.log(`User: ${username}, Email: ${email}, Age: ${age}`);
// Perform server-side logic, e.g., save user to database
}Volledig formuliervoorbeeld
Laten we wat we hebben geleerd combineren in een eenvoudig formulier voor een gastenboekbericht. De Server Action logt het bericht van de gast.
Let op: deze code is bedoeld voor een Next.js-omgeving en kan niet als zelfstandig JS-bestand worden uitgevoerd.
// app/actions.js
"use server";
export async function addGuestbookEntry(formData) {
const message = formData.get("message");
console.log(`New guestbook entry: ${message}`);
// In a real app, save to DB and revalidate cache
}
// app/page.js
import { addGuestbookEntry } from './actions';
export default function GuestbookPage() {
return (
<div>
<h1>Guestbook</h1>
<form action={addGuestbookEntry}>
<textarea name="message" rows="4" cols="30" placeholder="Your message..." required></textarea>
<button type="submit">Sign Guestbook</button>
</form>
</div>
);
}Meerdere invoervelden verwerken
Het object FormData verzamelt efficiënt alle invoervelden binnen je formulier die een kenmerk name hebben. Je kunt ze afzonderlijk openen.
formData.get('inputName'): haalt de eerste waarde voor een bepaalde naam op.formData.getAll('inputName'): retourneert een array met alle waarden van invoervelden met dezelfde naam, wat handig is voor meerdere selectievakjes.formData.entries(): retourneert een iterator voor alle sleutel-waardeparen.
Feedback voor gebruikers: laadstatussen
Wanneer een formulier wordt verzonden, is het een goede gewoonte om de gebruiker visuele feedback te geven. Next.js biedt hier samen met React de hook useFormStatus voor.
Met useFormStatus zie je of het bovenliggende <form> momenteel wordt verzonden. Zo kun je knoppen uitschakelen of een laadanimatie tonen.
// app/page.js (inside a component, e.g., SubmitButton.js)
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus(); // Gets status from parent <form>
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
// In your page.js:
// import { addGuestbookEntry } from './actions';
// export default function Page() {
// return (
// <form action={addGuestbookEntry}>
// {/* ... other inputs */}
// <SubmitButton />
// </form>
// );
// }Korte controle
Welke uitspraken over eenvoudige Server Action-formulieren in Next.js zijn correct?
Samenvatting en volgende stappen
Goed gedaan! Je hebt de basis geleerd van het maken van eenvoudige formulieren met Server Actions in Next.js:
- Server Actions zijn functies aan de serverzijde die zijn gemarkeerd met
"use server". - Ze vereenvoudigen het verzenden van formulieren doordat je de actie rechtstreeks aan de
action-eigenschap van een formulier kunt doorgeven. - Formuliergegevens zijn binnen de actie toegankelijk via een object
FormData. - De hook
useFormStatushelpt bij het implementeren van laadindicatoren.
Vervolgens bekijken we hoe Server Actions gegevens kunnen wijzigen en je gebruikersinterface automatisch kunnen revalideren!
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 “Basisformulieren 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 “Basisformulieren 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 “Basisformulieren met Server Actions”?
Maak interactieve formulieren die gegevens rechtstreeks naar de server verzenden met Next.js 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 1 van 4.
Hoe lang duurt de les “Basisformulieren 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
- Basisformulieren met Server Actions
- Gegevens wijzigen en revalideren
- Foutafhandeling in Actions
- Optimistische UI en wachtstatussen met Server Actions