App Routerの型、サーバーコンポーネントとクライアントコンポーネント

はじめに

サーバーコンポーネント

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

クライアントコンポーネント

"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

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

ルートハンドラー

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

ヒント

App Router のクライアント確認

まとめ