App Router 类型；服务器组件与客户端组件
理解 App Router 的默认行为（服务器组件）、何时选择客户端组件，以及如何为路由处理器指定类型。
App Router 类型；服务器组件与客户端组件 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 3 节课。
简介
目标：自信地使用带 TypeScript 的应用路由器。您将了解服务器组件（默认方式），在需要时启用客户端组件，并为 API 端点编写带类型的路由处理程序。
- 服务器端与客户端的功能
- 在两者之间传递带类型的属性
- 带类型的 NextRequest/NextResponse
服务器组件
app/ 下的文件默认是服务器组件。您可以运行仅限服务器端的代码，并在渲染前获取数据。
// 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"，即可启用钩子和事件处理程序。客户端组件在浏览器中运行。
"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>
)
}服务器到客户端的属性
在服务器上计算数据，并将其作为带类型的属性传递给客户端组件。不要将仅限服务器端的逻辑放到客户端。
// 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/*/route.ts 下使用 NextRequest/NextResponse 编写带类型的处理程序。使用状态码返回 JSON。
// 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 })
}提示
提示：
- 默认使用服务器组件；只有在需要交互性时才启用客户端组件。
- 在服务器与客户端之间传递的属性应保持简洁且可序列化。
- 始终一致地使用带类型的
NextResponse.json结构。
应用路由器客户端检查
快速检查：如何在应用路由器下的组件文件中启用钩子？
回顾
回顾：应用路由器默认使用服务器组件；添加 "use client" 以启用交互性，在边界两侧传递带类型的属性，并使用 NextRequest/NextResponse 为路由处理程序添加类型。
常见问题解答
「App Router 类型；服务器组件与客户端组件」课时是免费的吗？
是的 — 「App Router 类型；服务器组件与客户端组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 3 节课。
「App Router 类型；服务器组件与客户端组件」这节课中我会学到什么？
理解 App Router 的默认行为（服务器组件）、何时选择客户端组件，以及如何为路由处理器指定类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「App Router 类型；服务器组件与客户端组件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。