Next.js 15 Fullstack (App Router + Server Actions) · Lektion

Progressive Enhancement mit der form-Action-Prop

Binden Sie Formulare an Server Actions, damit sie ohne JavaScript funktionieren und nach der Hydration erweitert werden.

Lektion 1 von 413 Schritte

Progressive Enhancement mit der form-Action-Prop 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.

Forms That Work Without JavaScript

Progressive enhancement means a form works using plain HTML first, then gets better once JavaScript loads and React hydrates.

In Next.js 15 App Router, you achieve this by passing a Server Action directly to a form's action prop. The browser can submit the form natively to the server before any client JS arrives.

No JS yet? The form still posts and the server responds.
JS hydrated? React intercepts the submit and uses fetch under the hood, avoiding a full page reload.

What a Server Action Looks Like

A Server Action is an async function marked with the 'use server' directive. It runs only on the server.

When passed to <form action={...}>, Next.js wires it up so the form's fields arrive as FormData.

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const body = formData.get('body') as string
  // ...persist to your database here
  console.log('Saving:', { title, body })
}

Wiring the Action to the Form

Pass the Server Action straight into the action prop. Because this is real HTML, each input needs a name attribute so it shows up in FormData.

This component can be a Server Component — no 'use client' needed for the basic case.

// app/new/page.tsx
import { createPost } from '../actions'

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" required />
      <textarea name="body" placeholder="Body" />
      <button type="submit">Publish</button>
    </form>
  )
}

Why the name Attribute Matters

Native form submission serializes inputs by their name. Next.js builds the FormData object from those names — both when JS is off (native POST) and when it is on (intercepted fetch).

formData.get('title') reads the input named title.
An input without a name is invisible to the server.
This is the same contract as classic HTML forms, which is exactly why it degrades gracefully.

The No-JavaScript Path

Disable JavaScript in your browser and submit the form. It still works.

Here is what happens on that path:

The browser performs a standard HTTP POST to the current route.
Next.js runs your Server Action on the server with the submitted FormData.
If the action calls redirect() or revalidatePath(), the server responds with the updated page.

This is the baseline that progressive enhancement guarantees.

Redirect and Revalidate After Submit

After a successful mutation you usually want to refresh cached data and navigate. Both work on the no-JS path and the hydrated path.

revalidatePath('/posts') tells Next.js to refetch that route's data.
redirect('/posts') sends the user to the new location.

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await savePost({ title })
  revalidatePath('/posts')
  redirect('/posts')
}

Validating FormData on the Server

Never trust client input. Validate inside the Server Action so the rules apply even when JavaScript is disabled.

A clean approach is to parse FormData with a schema and return a typed result the form can display.

// app/actions.ts
'use server'

import { z } from 'zod'

const schema = z.object({
  title: z.string().min(3, 'Title too short'),
})

export async function createPost(formData: FormData) {
  const parsed = schema.safeParse({
    title: formData.get('title'),
  })
  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors }
  }
  await savePost(parsed.data)
  return { error: null }
}

Enhancing with useFormStatus

Once hydrated, you can show pending UI. The useFormStatus hook reports whether the parent form is submitting.

It must be called from a child component of the form, inside a Client Component. When JS is off, this code simply doesn't run, and the plain button is what the user sees.

// app/submit-button.tsx
'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Publishing...' : 'Publish'}
    </button>
  )
}

Returning State with useActionState

To surface validation errors and success messages, wrap the action with useActionState (React 19 / Next.js 15). It threads the action's return value back into your component as state.

The form still works without JS: the same action runs on a native POST, just without the in-place state update.

// app/post-form.tsx
'use client'

import { useActionState } from 'react'
import { createPost } from './actions'

export function PostForm() {
  const [state, formAction] = useActionState(createPost, { error: null })
  return (
    <form action={formAction}>
      <input name="title" />
      {state.error?.title && <p>{state.error.title[0]}</p>}
      <button type="submit">Publish</button>
    </form>
  )
}

Matching the Action Signature

When you use useActionState, the Server Action gains an extra first argument: the previous state. The signature changes from (formData) to (prevState, formData).

Keep the return shape consistent so the initial state and every result line up.

// app/actions.ts
'use server'

type State = { error: string | null }

export async function createPost(
  prevState: State,
  formData: FormData,
): Promise<State> {
  const title = formData.get('title') as string
  if (!title) return { error: 'Title is required' }
  await savePost({ title })
  return { error: null }
}

Keeping the No-JS Path Healthy

Progressive enhancement only holds if you avoid breaking the native path. Watch out for:

Relying on onClick or onChange handlers for required behavior — those need JS.
Submitting without a type="submit" button.
Reading values from React state instead of FormData in the action.

Rule of thumb: the action and inputs carry the contract; client hooks only enhance it. Test by disabling JS at least once.

Quick Check

Test your understanding of how a Server Action enables progressive enhancement.

Beantworte es in der interaktiven Lektion

Recap

You learned how to build progressively enhanced forms in Next.js 15:

Pass a Server Action to <form action={...}> so it works via native POST before hydration.
Give every input a name — that is the contract that feeds FormData on both paths.
Validate on the server so rules apply even with JS disabled.
Use redirect and revalidatePath to update the UI after a mutation.
Enhance with useFormStatus (pending UI) and useActionState (returned state), remembering the action signature becomes (prevState, formData).
Keep required behavior in the action and inputs, not in client-only handlers, and test with JavaScript off.

Kostenlos starten

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

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Progressive Enhancement mit der form-Action-Prop“ kostenlos?

Ja — der vollständige Text von „Progressive Enhancement mit der form-Action-Prop“ 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 „Progressive Enhancement mit der form-Action-Prop“?

Binden Sie Formulare an Server Actions, damit sie ohne JavaScript funktionieren und nach der Hydration erweitert werden. 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 „Progressive Enhancement mit der form-Action-Prop“?

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

Progressive Enhancement mit der form-Action-Prop
Ausstehende und Ladezustände mit useFormStatus
Feldbezogene Validierungsfehler mit useActionState
Sofortiges Feedback mit useOptimistic

← Zurück zu Next.js 15 Fullstack (App Router + Server Actions)