App Router types; server vs client components
Understand the App Router defaults (server components), when to opt into client components, and how to type route handlers.
Intro
Goal: Use App Router with TypeScript confidently. You will see server components (default), opt into client components when needed, and type route handlers for API endpoints.
- Server vs client capabilities
- Passing typed props between them
- Typed NextRequest/NextResponse
Server component
Files under app/ are server components by default. You can run server-only code and fetch data before render.
// 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>
)
}All lessons in this course
- App Router types; server vs client components
- Data fetching & action typing
- Env typing and config