page.js

Core Idea

page.js define UI única de uma rota; é o arquivo que torna um route segment publicamente acessível e sempre atua como a folha (leaf) da subárvore de rotas.

Key Concepts

• params: promise que resolve para os dynamic route params do root até a página; requer await ou use().
• searchParams: promise com os query params da URL atual; é uma Request-time API, então usá-la opta a página em dynamic rendering.
• PageProps<Route>: helper de tipo global (gerado por next dev/next build/next typegen) que tipa params e searchParams a partir da rota literal.
• Component hierarchy: page.js é envolvido por loading.js (Suspense), error.js (error boundary), template.js e layout.js no mesmo segmento.
• Páginas são Server Components por padrão, mas podem virar Client Component com 'use client'.

Code Examples

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

• O que demonstra: leitura assíncrona de params em dynamic route segment.

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

• O que demonstra: uso do helper PageProps para tipagem forte sem imports manuais.

Reference Tables

Example Route	URL	params
app/shop/[slug]/page.js	/shop/1	Promise<{ slug: '1' }>
app/shop/[category]/[item]/page.js	/shop/1/2	Promise<{ category: '1', item: '2' }>
app/shop/[...slug]/page.js	/shop/1/2	Promise<{ slug: ['1', '2'] }>

Example URL	searchParams
/shop?a=1	Promise<{ a: '1' }>
/shop?a=1&b=2	Promise<{ a: '1', b: '2' }>
/shop?a=1&a=2	Promise<{ a: ['1', '2'] }>

Anti-patterns

• Tratar searchParams como URLSearchParams: é um objeto JS plano, não a classe do browser.
• Acessar params/searchParams sincronamente em código novo: funciona só por compatibilidade (Next 15); será removido — use async/await ou use().

Key Takeaways

1. page.js é obrigatório para tornar um segmento navegável publicamente.
2. searchParams força dynamic rendering no momento em que é lido; com Cache Components, a posição de leitura na árvore determina quanto da página pode ser prerenderizado.
3. Em Client Components, use use(params)/use(searchParams) já que o componente não pode ser async.
4. PageProps<'/rota/[param]'> elimina a necessidade de tipar manualmente params/searchParams.

Connects To

• route.js: alternativa a page.js para expor um endpoint de API em vez de UI no mesmo segmento.
• layout.js/template.js: envolvem page.js na hierarquia de componentes.