TypeScript Academy · Oppitunti

App Routerin tyypit; palvelin- ja asiakaskomponentit

Ymmärtäkää App Routerin oletukset (palvelinkomponentit), milloin asiakaskomponentit otetaan käyttöön ja miten reittikäsittelijät tyypitetään.

Oppitunti 1/38 vaihetta

App Routerin tyypit; palvelin- ja asiakaskomponentit on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.

Johdanto

Tavoite: Käyttäkää App Routeria sujuvasti TypeScriptin kanssa. Tutustutte palvelinkomponentteihin (oletuksena), otatte tarvittaessa käyttöön asiakaspuolen komponentit ja tyypitätte API-päätepisteiden reittikäsittelijät.

Palvelimen ja asiakkaan ominaisuudet
Tyypitettyjen propsien välittäminen niiden välillä
Tyypitetyt NextRequest/NextResponse-käsittelijät

Palvelinkomponentti

app/-hakemiston tiedostot ovat oletusarvoisesti palvelinkomponentteja. Voitte suorittaa vain palvelimella ajettavaa koodia ja hakea tiedot ennen renderöintiä.

// 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>
  )
}

Asiakaspuolen komponentti

Lisätkää direktiivi "use client" alkuun, jotta hookit ja tapahtumankäsittelijät otetaan käyttöön. Asiakaspuolen komponentit suoritetaan selaimessa.

"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>
  )
}

Palvelimelta asiakkaalle välitettävät propsit

Laskekaa tiedot palvelimella ja välittäkää ne tyypitettyinä propseina asiakaspuolen komponenteille. Pitäkää vain palvelimelle tarkoitettu logiikka poissa asiakaspuolelta.

// 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>
  )
}

Reittikäsittelijät

Käyttäkää NextRequest- ja NextResponse-tyyppejä tyypitettyihin käsittelijöihin polussa app/api/*/route.ts. Palauttakaa JSON statuskoodeineen.

// 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 })
}

Vinkkejä

Vinkkejä:

Käyttäkää oletusarvoisesti palvelinkomponentteja; ottakaa asiakaspuoli käyttöön vain, kun tarvitsette vuorovaikutteisuutta.
Pitäkää palvelimen ja asiakkaan välillä välitettävät propsit pieninä ja sarjoitettavina.
Käyttäkää tyypitettyjä NextResponse.json-rakenteita yhdenmukaisesti.

App Routerin asiakaspuolen tarkistus

Pikatarkistus: Miten otatte hookit käyttöön App Routerin komponenttitiedostossa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kertaus: App Router käyttää oletusarvoisesti palvelinkomponentteja; lisätkää "use client" vuorovaikutteisuutta varten, välittäkää tyypitetyt propsit rajan yli ja tyypittäkää reittikäsittelijät NextRequest/NextResponse-tyypeillä.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”App Routerin tyypit; palvelin- ja asiakaskomponentit” ilmainen?

Kyllä – oppitunnin ”App Routerin tyypit; palvelin- ja asiakaskomponentit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”App Routerin tyypit; palvelin- ja asiakaskomponentit”?

Ymmärtäkää App Routerin oletukset (palvelinkomponentit), milloin asiakaskomponentit otetaan käyttöön ja miten reittikäsittelijät tyypitetään. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”App Routerin tyypit; palvelin- ja asiakaskomponentit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

App Routerin tyypit; palvelin- ja asiakaskomponentit
Datan haku ja action-tyypitys
Ympäristömuuttujien tyypitys ja asetukset

← Takaisin: TypeScript Academy