Frontend Academy · Aula

Pages Router vs App Router

Comparar os paradigmas de roteamento do Next.js: o Pages Router baseado em ficheiros e o novo App Router, com layouts aninhados, estados de carregamento e limites de erros.

Pages Router vs App Router é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Dois roteadores, uma estrutura

O Next.js tem dois sistemas de roteamento: o Roteador de Páginas original, no diretório pages/, e o novo Roteador de Aplicações, no diretório app/, disponível a partir do Next 13. Ambos continuam funcionando no Next 14/15.

Roteador de Páginas — roteamento baseado em arquivos

Cada arquivo em pages/ se torna uma rota. Segmentos dinâmicos usam colchetes: pages/users/[id].tsx corresponde a /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Roteador de Páginas — busca de dados

Exportações especiais declaram o comportamento de busca: getStaticProps (SSG), getServerSideProps (SSR) e getStaticPaths (SSG com rotas dinâmicas).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

Roteador de Aplicações — roteamento baseado em pastas

O Roteador de Aplicações usa pastas como segmentos de rota. Um arquivo page.tsx dentro de uma pasta define a página.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

Roteador de Aplicações — arquivos especiais

Arquivos por segmento oferecem primitivas poderosas: layout.tsx (interface persistente ao redor dos filhos), loading.tsx (conteúdo alternativo de Suspense), error.tsx (limite de erro) e not-found.tsx.

Layouts aninhados

Os layouts do Roteador de Aplicações envolvem as rotas aninhadas e persistem durante a navegação — não são montados novamente.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Busca de dados no Roteador de Aplicações

Os Componentes do Servidor podem ser assíncronos e fazer buscas diretamente — não usam getServerSideProps/getStaticProps. O componente é executado no servidor e envia somente HTML ao cliente.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Componentes do Cliente no Roteador de Aplicações

Adicione 'use client' no início de um arquivo para marcar seu componente como um Componente do Cliente, interativo e executado no navegador.

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Rotas de API versus manipuladores de rota

Roteador de Páginas: pages/api/users.ts exporta uma função padrão com req/res. Roteador de Aplicações: app/api/users/route.ts exporta métodos HTTP, GET e POST, como exportações nomeadas usando os objetos padrão Request/Response.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Estratégia de migração

Ambos os roteadores podem coexistir no mesmo projeto — mova as páginas gradualmente, uma por vez. O Roteador de Aplicações tem precedência quando há um conflito.

Quando usar cada um

Projetos novos: Roteador de Aplicações, que é mais poderoso e o foco atual dos investimentos. Projetos existentes com o Roteador de Páginas: permaneça nele ou migre gradualmente. Sites estáticos pequenos, sem necessidade de layouts ou RSC: qualquer um funciona.

Verificação rápida

Como se marca um componente como Componente de Cliente no roteador de aplicações do Next.js?

Recapitulação: Roteador de Páginas vs Roteador de Aplicações

Roteador de Páginas: baseado em arquivos, getStaticProps/getServerSideProps. Roteador de Aplicações (Next 13+): baseado em pastas, Componentes de Servidor assíncronos, layouts aninhados e arquivos de carregamento/erro. Marque a interatividade do cliente com 'use client'. Rotas de API: pages/api/* vs app/api/*/route.ts com exportações de métodos HTTP. Ambos coexistem; o Roteador de Aplicações recebe desenvolvimento ativo.

Perguntas Frequentes

A aula “Pages Router vs App Router” é grátis?

Sim — o texto completo de “Pages Router vs App Router” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Pages Router vs App Router”?

Comparar os paradigmas de roteamento do Next.js: o Pages Router baseado em ficheiros e o novo App Router, com layouts aninhados, estados de carregamento e limites de erros. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 4.

Quanto tempo leva a aula “Pages Router vs App Router”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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

Pages Router vs App Router
Componentes do servidor e componentes do cliente
SSG, SSR e ISR
Rotas de API e Middleware do Next.js

← Voltar para Frontend Academy