Fullstackformulieren met Server Actions
Gebruik Server Actions om formulierinzendingen rechtstreeks op de server af te handelen en gegevensmutaties te vereenvoudigen.
Fullstackformulieren met Server Actions is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 3 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 Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat zijn Server Actions?
Met Server Actions in Next.js 15 kun je servercode rechtstreeks vanuit je React-componenten uitvoeren. Dit is een krachtige functie die gegevenswijzigingen en interacties met de back-end eenvoudiger maakt.
Je kunt ze zien als kleine, rechtstreekse verbindingen met je serverlogica, zonder dat je voor elke taak aan de back-end afzonderlijke API-routes hoeft te maken.
Formulieren en Server Actions
Een van de belangrijkste toepassingen van Server Actions is het afhandelen van formulierverzendingen. Wanneer je een HTML-element <form> koppelt aan een Server Action, verzendt de browser de formuliergegevens automatisch naar je serverfunctie.
- Het
action-attribuut van<form>verwijst rechtstreeks naar je Server Action-functie. - Hierdoor is geen JavaScript aan de clientzijde nodig om formuliergegevens te verzamelen en te verzenden, waardoor formulieren eenvoudiger en robuuster worden.
Je eerste Action definiëren
Een Server Action is eenvoudigweg een asynchrone JavaScript-functie die is gemarkeerd met de richtlijn "use server". Deze richtlijn vertelt Next.js dat de functie op de server moet worden uitgevoerd.
Je kunt Server Actions rechtstreeks in je React-componenten definiëren (als dit Server Components zijn) of in afzonderlijke bestanden voor een betere structuur.
Voorbeeld van een eenvoudige Server Action
Laten we een eenvoudig formulier maken waarin een gebruikersnaam wordt ingevoerd. Bij verzending registreert een Server Action de gebruikersnaam op de server. Let op de "use server" bovenaan de functie.
// app/page.js
// This async function is our Server Action
async function processUsername(formData) {
"use server"; // Marks this function to run on the server
const username = formData.get('username'); // Get value by input's 'name' attribute
console.log('Server received username:', username);
// In a real application, you'd typically save this to a database
}
export default function HomePage() {
return (
<div>
<h1>Enter Your Username</h1>
<form action={processUsername}> {/* Link form to the Server Action */}
<input type="text" name="username" placeholder="Your username" required />
<button type="submit">Submit</button>
</form>
</div>
);
}Formuliergegevens openen
Wanneer een formulier naar een Server Action wordt verzonden, ontvangt de action als eerste argument een object van het type FormData. Dit object is een standaardweb-API die alle sleutel-waardeparen uit de invoervelden van je formulier bevat.
- Gebruik
formData.get('fieldName')om de waarde van een specifieke invoer op te halen. 'fieldName'moet overeenkomen met hetname-attribuut van je HTML-invoerelement (bijvoorbeeld<input name="username" />).
Doorsturen na verzending
Nadat een gebruiker een formulier succesvol heeft verzonden en je Server Action de gegevens heeft verwerkt (bijvoorbeeld door ze in een database op te slaan), wil je de gebruiker vaak doorsturen naar een andere pagina, zoals een bevestigingspagina of een lijstweergave.
Next.js biedt hiervoor de functie redirect uit next/navigation. Je kunt deze rechtstreeks in je Server Action aanroepen om de gebruiker naar een nieuwe route te navigeren.
Voorbeeld van een Action met doorsturen
Laten we ons formulier uitbreiden zodat de gebruiker na een geslaagde verzending wordt doorgestuurd. In dit voorbeeld sturen we de gebruiker door naar /success-page.
// app/page.js
import { redirect } from 'next/navigation'; // Import the redirect function
async function handleSubmit(formData) {
"use server";
const username = formData.get('username');
console.log('Processing username:', username);
// In a real app, you'd do database operations here
// After successful processing, redirect the user
redirect('/success-page');
}
export default function SignupPage() {
return (
<div>
<h1>Sign Up</h1>
<form action={handleSubmit}>
<input type="text" name="username" placeholder="Username" required />
<button type="submit">Register</button>
</form>
</div>
);
}
// Note: For this example to fully work, you would need an actual
// app/success-page/page.js file with some content.
Basisfoutafhandeling
Server Actions kunnen fouten tegenkomen, zoals ongeldige invoer of problemen met een database. Je kunt standaard JavaScript-blokken van het type try...catch in je action gebruiken om deze mogelijke problemen netjes af te handelen.
Voor uitgebreidere foutfeedback aan de gebruiker kun je gegevens vanuit de action retourneren naar de clientcomponent of een gespecialiseerde formulierbibliotheek gebruiken.
De gebruikersinterface bijwerken met revalidatie
Nadat een Server Action de gegevens succesvol heeft gewijzigd (bijvoorbeeld door een nieuw bericht toe te voegen), moet je gebruikersinterface mogelijk worden bijgewerkt om deze wijziging weer te geven. Next.js biedt hiervoor functies zoals revalidatePath en revalidateTag uit next/cache.
Deze functies vertellen Next.js dat de gegevens voor een specifiek pad of een tag van gegevens in de cache opnieuw moeten worden opgehaald en weergegeven. Zo zien je gebruikers altijd de nieuwste informatie zonder een volledige paginavernieuwing.
Vraag over Server Actions
Bekijk de volgende Server Action en het volgende formulier in een Next.js App Router-toepassing:
// app/add-task/page.js
import { redirect } from 'next/navigation';
async function createTask(formData) {
"use server";
const taskTitle = formData.get('title');
if (taskTitle.length < 5) {
throw new Error('Task title must be at least 5 characters long.');
}
console.log('Creating task:', taskTitle);
// Simulate saving to database
redirect('/tasks');
}
export default function AddTaskPage() {
return (
<form action={createTask}>
<input type="text" name="title" placeholder="Task Title" />
<button type="submit">Add Task</button>
</form>
);
}Samenvatting: full-stackformulieren
Je beheerst nu hoe Server Actions formulierverwerking van front-end tot back-end in Next.js 15 eenvoudiger maken!
- Server Actions (
"use server") voeren code rechtstreeks op de server uit. - HTML
<form action={yourAction}>verzendt automatischFormDatanaar je action. - Open formuliervelden met
formData.get('name'). - Gebruik
redirectuitnext/navigationom na verzending te navigeren. - Implementeer foutafhandeling met
try...catchin je actions. - Gebruik eventueel
revalidatePathofrevalidateTagom de gebruikersinterface na gegevenswijzigingen bij te werken.
Dit patroon vermindert standaardcode en stroomlijnt je werkstromen voor gegevenswijzigingen.
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
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Fullstackformulieren met Server Actions” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Fullstackformulieren 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 Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.
Wat leer ik in “Fullstackformulieren met Server Actions”?
Gebruik Server Actions om formulierinzendingen rechtstreeks op de server af te handelen en gegevensmutaties te vereenvoudigen. Je oefent met Fullstackwebapps met Next.js 15 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 Fullstackwebapps met Next.js 15 te beginnen?
Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 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 3 van 4.
Hoe lang duurt de les “Fullstackformulieren 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 Fullstackwebapps met Next.js 15?
Ja. Elke les over Fullstackwebapps met Next.js 15 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
- Gecontroleerde componenten en state
- Formuliervalidatie met React Hook Form
- Fullstackformulieren met Server Actions
- Bestandsuploads en multipart-formulierverwerking