App-Router-Typen; Server- vs. Client-Komponenten
Verstehen Sie die Standardeinstellungen des App Routers (Server-Komponenten), wann Sie Client-Komponenten aktivieren und wie Sie Route-Handler typisieren.
App-Router-Typen; Server- vs. Client-Komponenten ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. 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 TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Einführung
Ziel: Arbeiten Sie sicher mit dem App Router und TypeScript. Sie lernen Server Components (standardmäßig) kennen, aktivieren bei Bedarf Client Components und typisieren Route-Handler für API-Endpunkte.
- Funktionen von Server und Client
- Übergabe typisierter Props zwischen beiden
- Typisierte NextRequest/NextResponse
Server Component
Dateien unter app/ sind standardmäßig Server Components. Sie können serverseitigen Code ausführen und Daten vor dem Rendern abrufen.
// app/page.tsx (server component by default)
export default async function Page() {
// Server code: read env, fetch data, call DB (conceptually)
const data: { message: string } = { message: "Hello from server component" }
return (
<main style={{ display: "grid", gap: 8 }}>
<h1>Home</h1>
<p>{data.message}</p>
</main>
)
}Client Component
Fügen Sie die Direktive "use client" am Anfang hinzu, um Hooks und Event-Handler zu aktivieren. Client Components werden im Browser ausgeführt.
"use client"
import { useState } from "react"
// app/components/Counter.tsx (client component)
export default function Counter() {
const [n, setN] = useState(0)
return (
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<button onClick={() => setN(n - 1)}>-</button>
<span>{n}</span>
<button onClick={() => setN(n + 1)}>+</button>
</div>
)
}Server → Client-Props
Berechnen Sie Daten auf dem Server und übergeben Sie sie als typisierte Props an Client Components. Halten Sie serverseitige Logik vom Client fern.
// app/page.tsx (server) + client import
import Counter from "./components/Counter"
export default async function Page() {
const initial = 5 // fetched or computed on the server
return (
<main style={{ display: "grid", gap: 12 }}>
<h2>Dashboard</h2>
<CounterWithStart start={initial} />
</main>
)
}
// app/components/CounterWithStart.tsx
"use client"
import { useState } from "react"
export default function CounterWithStart({ start }: { start: number }) {
const [n, setN] = useState(start)
return (
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<button onClick={() => setN(n - 1)}>-</button>
<span>{n}</span>
<button onClick={() => setN(n + 1)}>+</button>
</div>
)
}Route-Handler
Verwenden Sie NextRequest/NextResponse für typisierte Handler unter app/api/*/route.ts. Geben Sie JSON mit Statuscodes zurück.
// app/api/hello/route.ts (App Router API)
import { NextRequest, NextResponse } from "next/server"
export async function GET(req: NextRequest) {
const name = req.nextUrl.searchParams.get("name") ?? "world"
const body: { message: string } = { message: `Hello, ${name}!` }
return NextResponse.json(body, { status: 200 })
}
export async function POST(req: NextRequest) {
const payload = (await req.json()) as { name?: string }
const body = { created: true, name: payload.name ?? "anon" }
return NextResponse.json(body, { status: 201 })
}Tipps
Tipps:
- Verwenden Sie standardmäßig Server Components und aktivieren Sie Client Components nur, wenn Sie Interaktivität benötigen.
- Halten Sie Props zwischen Server und Client klein und serialisierbar.
- Verwenden Sie konsistent typisierte Strukturen für
NextResponse.json.
App-Router-Client-Prüfung
Kurze Prüfung: Wie aktivieren Sie Hooks in einer Komponentendatei unter dem App Router?
Zusammenfassung
Zusammenfassung: Der App Router verwendet standardmäßig Server Components. Fügen Sie "use client" für Interaktivität hinzu, übergeben Sie typisierte Props über die Grenze hinweg und typisieren Sie Route-Handler mit NextRequest/NextResponse.
Häufig gestellte Fragen
Ist die Lektion „App-Router-Typen; Server- vs. Client-Komponenten“ kostenlos?
Ja — der vollständige Text von „App-Router-Typen; Server- vs. Client-Komponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „App-Router-Typen; Server- vs. Client-Komponenten“?
Verstehen Sie die Standardeinstellungen des App Routers (Server-Komponenten), wann Sie Client-Komponenten aktivieren und wie Sie Route-Handler typisieren. Du übst TypeScript Academy 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 TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy 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 3.
Wie lange dauert die Lektion „App-Router-Typen; Server- vs. Client-Komponenten“?
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 TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-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
- App-Router-Typen; Server- vs. Client-Komponenten
- Datene Abrufe und Action-Typisierung
- Typisierung von Umgebungsvariablen und Konfiguration