Next.js 15 App Router Master Guide — Server Komponenten Best Practices

Der App Router in Next.js 15 stellt ein neues Paradigma dar, das sich um React Server Components zentriert. Hier eine Sammlung von Best Practices validiert in der Produktion ab 2026.

1. 1Dateisystemstruktur

app/
  layout.tsx           # Root layout (required)
  page.tsx             # Home /
  loading.tsx          # Loading UI
  error.tsx            # Error boundary
  not-found.tsx        # 404
  (marketing)/         # Route group (no URL impact)
    page.tsx
  blog/
    [slug]/
      page.tsx         # /blog/xxx
  api/
    route.ts           # REST endpoint

*Route Gruppen (Gruppe): Verwendet, um Layouts zu teilen, ohne die URL-Struktur zu beeinflussen.

Server vs Client Components

Server ist der Standard. Eine Komponente muss ausdrücklich als Clientkomponente "Verwendungs-Client" erklären.

// Server Component (default)
async function Page() {
  const user = await fetchUser()  // Fetched directly on the server
  return <ProfileCard user={user} />
}

// Client Component
"Client verwenden"
Funktion InteractiveButton() {
const [count, setCount] = useState(0)
zurück <button onClick={() => setCount(count + 1)}>{count}</button>
}

Grundprinzipien

• Platz `"Verwenden Sie Client" am untersten Blatt des Bauteilbaums.
• Halten Sie die Komponenten auf der oberen Ebene als Server-Komponenten.
• Werte, die als Requisiten weitergegeben werden, müssen serialisierbar sein (nur JSON-kompatible Typen).

1. 1Datenerhebung

// Parallel fetching
async function Page({ params }) {
  const [user, posts] = await Promise.all([
    fetchUser(params.id),
    fetchPosts(params.id),
  ])
  return <Dashboard user={user} posts={posts} />
}

* Automatischer Fäkchen-Caching:

• fetch(url) — Benutzt den Standard-Cache
• fetch(url, { cache: "no-store" }) — Fälschungen auf jeder Anfrage
• fetch(url, { next: { revalidate: 60 } }) — ISR, revalidiert alle 60 Sekunden

1. 1Suspense + Streaming

import { Suspense } from "react"

Export Standardfunktion Seite() {
zurück (
    <>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </>
)
}

Async Funktion SlowSection() {
erwarten neue Promise(r => setTimeout(r, 2000)
Rückgabe <div>Done</div>
}

Nur der langsame Abschnitt wird gestreamt, so dass eine sofortige TTFB Verbesserung.

1. 1Serveraktionen

// app/actions.ts
"use server"
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.insert(posts).values({ title })
  revalidatePath("/blog")
}

// app/blog/new/page.tsx
Import { createPost } aus "../actions"
Export Standardfunktion NewPost() {
zurück <form action={createPost)>...</form>
}

Serverlogik kann direkt ohne REST API aufgerufen werden, und CSRF-Schutz wird automatisch bearbeitet.

1. 1Fehlerbehebungen

// app/blog/error.tsx
"use client"
export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Retry</button>
    </div>
  )
}

Segment-Level-Fehlergrenzen ermöglichen es, dass der Rest der Seite normal funktioniert, auch wenn ein Fehler in einem Teil auftritt.

1. 1Metadaten und SEO

export const metadata = {
  title: "My Page",
  description: "...",
}

// Oder dynamisch einstellen
Exportasync-Funktion generierenMetadata({ params }) {
const post = warten fetchPost(params. Slug)
zurück { Titel: post.title }
}

10 Best Practices

1. 1 Server standardmäßig: Verwenden Sie nur "Client verwenden", wenn absolut notwendig
2. 2Fetch-Daten so hoch wie möglich: Vermeiden Sie Propellerbohrungen
3. 3*Leverage Suspense aktiv: Maximieren Sie TTFB mit Streaming
4. 4*fetch + revalidiert: Automatisches Caching ohne Redis
5. 5*Server-Aktionen: REST ersetzen und Kesselplatte reduzieren
6. 6*dynamisch = kraftdynamisch: Reserve nur für personalisierte Seiten
7. 7Bildoptimierung: Die Komponente ist ein Muss
8. 8Font Optimierung: Verwenden Sie next/font
9. 9*'Import Server-only': Verhindern Sie sensiblen Code von Leck auf den Client
10. 10*Parallel Routen: Verwenden Sie @slot für komplexe Dashboards

Häufige Fehler

• Die Verwendung von useState in einer Server-Komponente → verursacht einen Fehler
• Verwendung von fetch in einem Client-Komponente → Leistungsdegradation (serverseitiges Abholen ist bevorzugt)
• Passende Funktionen oder Termine als Props → Serialisierungsfehler
• Importieren von Async-Server-Komponenten aus einer "Benutzer-Client"-Datei → kann Verwirrung verursachen

• Praktische Einblicke

Die meisten Blogs stoppen bei "App Router ist großartig, verwenden Server Components" - aber für Produktionsumgebungen in Korea ist der entscheidende Faktor *Cloudflare Pages / Vercel Edge Laufzeitkompatibilität. Nach sechsmonatiger Ausführung einer 18-Werkzeug-Website (MillionsCode) auf OpenNext kann ich bestätigen, dass das Setzen von export const runtime = 'edge' im RootLayout oder eine falsche Route einen sofortigen weißen Bildschirm verursacht. Der sicherste Ansatz ist es, es unzufrieden zu lassen und OpenNext zu handhaben. Ab 2024 npm Trends hat App Router Adoption Pages Router (67% vs 33%) überholt, aber große koreanischen Dienstleistungen wie Toss und Karrot sind immer noch inkrementell migriert. Für neue Projekte ist App Router die klare Empfehlung; für ältere Codebases ist die Migrationsroute auf der Strecke der realistischste Weg. Ein weiteres häufiges Problem in der koreanischen Produktion ist die Erstellung von Fehlern, die durch den Versuch, headers() oder cookies() innerhalb einer "use-Client"-Komponente verursacht werden - dies wird sofort behoben, indem die Werte als Requisiten von einer Server-Komponente übergeben werden. Während der automatische CSRF-Schutz von Server Actions leistungsstark ist, benötigen interne Admin-Panels, die Zahlungsaufrufe von Toss Payments oder KCP erhalten, immer noch eine separate Webhook-Route. Mit Suspense + Streaming habe ich persönlich eine Reduktion des durchschnittlichen TTFB von 800ms auf 220ms auf mobilen 4G-Verbindungen bestätigt.

Schlussfolgerung

App Router hat eine erste Lernkurve, aber sobald Sie den Hang davon bekommen, erhalten Sie das *best von SPA und SSR in Ihrer Entwicklungserfahrung. Für jedes neue Next.js-Projekt im Jahr 2026, App Router ist der Weg zu gehen. Pages Router ist ein Migrationsziel.

--

Referenz: Cloudflare Developer Documentation

Häufig gestellte Fragen (FAQ)

Q1. Was hat sich in Next.js 15 App Router geändert? A: Die App-Struktur wurde um Server-Komponenten, verschachtelte Layouts, Streaming und Datencaching neu gestaltet.

Q2. Sollte ich App Router oder Pages Router verwenden? A: App Router ist der Standard für neue Projekte; für bestehende Dienste ist es besser, Routen schrittweise zu migrieren.

Q3. Was sind die besten Praktiken für Serverkomponenten? A: Komponenten als Serverkomponenten standardmäßig halten und nur Teile extrahieren, die Interaktivität in Clientkomponenten erfordern.

Q4. Wie erstelle ich Daten in Next.js App Router?

A: Fetch direkt in Serverkomponenten und konfigurieren Cache-, Revalidierungs- und Suspense-Grenzen explizit.

Q5. Was sind die häufigsten Probleme bei der Migration auf App Router? A: Client-Hook-Platzierung, globales Staatsmanagement, Metadaten-Handling, Cache-Verhalten und Routing-Strukturänderungen.

Q6. Was sind die wichtigsten Punkte für Next.js 15 Leistungsoptimierung? A: Tune Server Rendering Grenzen, Bildoptimierung, Cache-Strategie, Bündelanalyse und Streaming UX zusammen.