Tipos de App Router; componentes de servidor versus cliente
Entenda os padrões do App Router (componentes de servidor), quando optar por componentes de cliente e como tipificar manipuladores de rotas.
Tipos de App Router; componentes de servidor versus cliente é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.
Introdução
Objetivo: use o Roteador de Aplicativos com TypeScript com confiança. Você verá componentes do servidor (padrão), optará por componentes do cliente quando necessário e tipará manipuladores de rotas para endpoints de API.
- Capacidades do servidor e do cliente
- Passagem de propriedades tipadas entre eles
- NextRequest/NextResponse tipados
Componente do servidor
Os arquivos em app/ são componentes do servidor por padrão. Você pode executar código exclusivo do servidor e buscar dados antes da renderização.
// 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 do cliente
Adicione a diretiva "use client" no início para habilitar hooks e manipuladores de eventos. Os componentes do cliente são executados no navegador.
"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>
)
}Propriedades do servidor para o cliente
Calcule os dados no servidor e passe-os como propriedades tipadas para os componentes do cliente. Mantenha a lógica exclusiva do servidor fora do cliente.
// 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>
)
}Manipuladores de rotas
Use NextRequest/NextResponse para manipuladores tipados em app/api/*/route.ts. Retorne JSON com códigos de status.
// 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 })
}Dicas
Dicas:
- Prefira componentes do servidor por padrão; opte pelo cliente somente quando precisar de interatividade.
- Mantenha as propriedades pequenas e serializáveis entre o servidor e o cliente.
- Use de forma consistente estruturas tipadas de
NextResponse.json.
Verificação do cliente no Roteador de Aplicativos
Verificação rápida: como habilitar hooks em um arquivo de componente no Roteador de Aplicativos?
Recapitulação
Recapitulação: o Roteador de Aplicativos usa componentes do servidor por padrão; adicione "use client" para obter interatividade, passe propriedades tipadas entre os limites e tipa os manipuladores de rotas com NextRequest/NextResponse.
Perguntas Frequentes
A aula “Tipos de App Router; componentes de servidor versus cliente” é grátis?
Sim — o texto completo de “Tipos de App Router; componentes de servidor versus cliente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.
O que vou aprender em “Tipos de App Router; componentes de servidor versus cliente”?
Entenda os padrões do App Router (componentes de servidor), quando optar por componentes de cliente e como tipificar manipuladores de rotas. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.
Quanto tempo leva a aula “Tipos de App Router; componentes de servidor versus cliente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tipos de App Router; componentes de servidor versus cliente
- Busca de dados e tipagem de ações
- Tipagem de ambiente e configuração