Grundlegende Formulare mit Server Actions
Erstellen Sie interaktive Formulare, die Daten mithilfe von Next.js Server Actions direkt an den Server senden.
Grundlegende Formulare mit Server Actions ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Intro to Server Actions
Welcome to Server Actions! This powerful Next.js 15 feature allows you to define functions that run directly on the server, callable from your client components.
Think of them as a way to send data to your server without needing to create a separate API route. They simplify data mutations and form submissions.
Why Use Server Actions?
Server Actions offer several key benefits for your Next.js applications:
- Simplified Data Mutations: Directly call server-side code from your forms.
- Reduced Client-Side JS: Less JavaScript needs to be sent to the browser.
- Improved Performance: Actions run closer to your database, potentially reducing latency.
- Automatic Revalidation: They can automatically update cached data after a successful mutation (more on this in a later lesson!).
Defining a Server Action
A Server Action is an async function marked with the "use server" directive. This directive tells Next.js to treat the function as server-only code.
You can define actions directly in your components or in a separate file (e.g., app/actions.js) and import them.
// 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
}Connecting Form to Action
To link an HTML <form> element to a Server Action, you simply pass the action function directly to the form's action prop. It's that easy!
When the form is submitted, Next.js automatically invokes the specified Server Action.
// 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>
);
}Accessing Form Data
When a form submits to a Server Action, the action function automatically receives a FormData object as its first argument.
You can use formData.get('fieldName') to retrieve the value of an input based on its name attribute.
// 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
}Full Form Example
Let's combine what we've learned into a simple guestbook entry form. The Server Action will log the guest's message.
Remember, this code is for a Next.js environment and isn't runnable as a standalone JS file.
// 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>
);
}Handling Multiple Inputs
The FormData object efficiently captures all inputs within your form that have a name attribute. You can access them individually.
formData.get('inputName'): Gets the first value for a given name.formData.getAll('inputName'): Returns an array of all values for inputs with the same name (useful for multiple checkboxes).formData.entries(): Returns an iterator for all key/value pairs.
User Feedback: Loading States
When a form is submitting, it's good practice to provide visual feedback to the user. Next.js, along with React, provides the useFormStatus hook for this.
useFormStatus tells you if the parent <form> is currently submitting, allowing you to disable buttons or show a spinner.
// 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>
// );
// }Quick Check
Which statements about basic Next.js Server Action forms are correct?
Recap & Next Steps
Great job! You've learned the fundamentals of creating basic forms with Next.js Server Actions:
- Server Actions are server-side functions marked with
"use server". - They simplify form submissions by allowing you to pass the action directly to a form's
actionprop. - Form data is accessed within the action via a
FormDataobject. - The
useFormStatushook helps implement loading indicators.
Next, we'll dive into how Server Actions can mutate data and automatically revalidate your UI!
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „Grundlegende Formulare mit Server Actions“ kostenlos?
Ja — der vollständige Text von „Grundlegende Formulare mit Server Actions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grundlegende Formulare mit Server Actions“?
Erstellen Sie interaktive Formulare, die Daten mithilfe von Next.js Server Actions direkt an den Server senden. Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Grundlegende Formulare mit Server Actions“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grundlegende Formulare mit Server Actions
- Daten mutieren und revalidieren
- Fehlerbehandlung in Actions
- Optimistische UI und ausstehende Zustände mit Server Actions