Tipi dei gestori App Router; componenti server e client
Comprenda le impostazioni predefinite di App Router (componenti server), quando optare per i componenti client e come tipizzare i gestori delle route.
Tipi dei gestori App Router; componenti server e client è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 3 lezioni in totale.
Introduzione
Obiettivo: usare App Router con TypeScript in modo sicuro. Vedrà i componenti server (impostazione predefinita), abiliterà i componenti client quando necessario e tipizzerà i route handler per gli endpoint API.
- Funzionalità lato server e lato client
- Passaggio di props tipizzate tra i due contesti
- NextRequest/NextResponse tipizzati
Componente server
I file sotto app/ sono componenti server per impostazione predefinita. Può eseguire codice riservato al server e recuperare dati prima del rendering.
// 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>
)
}Componente client
Aggiunga la direttiva "use client" all'inizio del file per abilitare hook e gestori degli eventi. I componenti client vengono eseguiti nel browser.
"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>
)
}Props dal server al client
Calcoli i dati sul server e li passi come props tipizzate ai componenti client. Mantenga la logica riservata al server fuori dal client.
// 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
Usi NextRequest/NextResponse per handler tipizzati sotto app/api/*/route.ts. Restituisca JSON con codici di stato.
// 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 })
}Suggerimenti
Suggerimenti:
- Utilizzi per impostazione predefinita i componenti server; scelga i componenti client solo quando serve interattività.
- Mantenga le props piccole e serializzabili tra server e client.
- Usi in modo coerente strutture tipizzate per
NextResponse.json.
Verifica dei componenti client in App Router
Verifica rapida: come si abilitano gli hook in un file di componenti con App Router?
Riepilogo
Riepilogo: App Router usa per impostazione predefinita i componenti server; aggiunga "use client" per l'interattività, passi props tipizzate oltre il confine e tipizzi i route handler con NextRequest/NextResponse.
Domande Frequenti
La lezione «Tipi dei gestori App Router; componenti server e client» è gratuita?
Sì — il testo completo di «Tipi dei gestori App Router; componenti server e client» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 3 lezioni in totale.
Cosa imparerò in «Tipi dei gestori App Router; componenti server e client»?
Comprenda le impostazioni predefinite di App Router (componenti server), quando optare per i componenti client e come tipizzare i gestori delle route. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.
Quanto tempo richiede la lezione «Tipi dei gestori App Router; componenti server e client»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipi dei gestori App Router; componenti server e client
- Recupero dei dati e tipizzazione delle action
- Tipizzazione delle variabili d’ambiente e configurazione