0Pricing
React Academy · Aula

Convenções de arquivos do App Router

Entenda o diretório app/, os arquivos page.tsx, layout.tsx, loading.tsx e error.tsx.

Convenções de arquivos do App Router é uma aula grátis de React 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O diretório app/

O roteador de aplicativos do Next.js usa o diretório app/. As pastas definem segmentos de URL; os arquivos especiais dentro das pastas definem o comportamento de cada segmento.

page.tsx — A interface da rota

page.tsx exporta o componente React renderizado para um segmento de URL. Sem um page.tsx, a rota não fica acessível publicamente.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Shells persistentes

layout.tsx envolve as rotas filhas. Ele persiste durante as navegações — seu estado não é redefinido quando a rota filha muda.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Interface de carregamento instantâneo

loading.tsx é renderizado imediatamente enquanto os dados assíncronos da página são carregados. Ele envolve a página em um limite automático de Suspense.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Limites de erros

error.tsx é um limite de erros do React para o segmento. Ele recebe o erro e uma função reset para tentar novamente.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — Interface 404

not-found.tsx é renderizado quando notFound() é chamado por um componente de servidor ou quando nenhuma rota corresponde.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Layouts remontados

template.tsx é semelhante a layout.tsx, mas cria uma nova instância a cada navegação — o estado é redefinido e os efeitos são executados novamente. Use-o para animações ou análises.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Rotas de acesso

route.ts (não route.tsx) exporta manipuladores de métodos HTTP (GET, POST etc.) para criar pontos de acesso dentro do diretório app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — Camada intermediária de borda

middleware.ts, localizado na raiz do projeto, é executado antes de cada solicitação correspondente na borda — usado para verificações de autenticação, redirecionamentos e reescritas de cabeçalhos.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Colocalização

Você pode manter arquivos que não são de rotas (componentes, utilitários, testes) junto às pastas app/. Somente arquivos nomeados segundo as convenções especiais (page, layout etc.) são tratados como segmentos de rota.

Layouts aninhados

Cada pasta pode ter seu próprio layout.tsx. O layout aninhado envolve apenas os filhos do próprio segmento, compondo-se com o layout pai acima dele.

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

Verificação rápida

Qual arquivo do Roteador de aplicativos fornece um conteúdo alternativo automático enquanto os dados assíncronos de uma página são carregados?

Recapitulação

O Roteador de aplicativos usa arquivos especiais: page.tsx (interface da rota), layout.tsx (shell persistente), loading.tsx (conteúdo alternativo durante o carregamento), error.tsx (limite de erros), not-found.tsx (404), route.ts (acesso à API) e middleware.ts (lógica de borda).

Perguntas Frequentes

A aula “Convenções de arquivos do App Router” é grátis?

Sim — o texto completo de “Convenções de arquivos do 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Convenções de arquivos do App Router”?

Entenda o diretório app/, os arquivos page.tsx, layout.tsx, loading.tsx e error.tsx. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 “Convenções de arquivos do 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 React Academy?

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

  1. Convenções de arquivos do App Router
  2. Componentes de servidor e cliente no Next.js
  3. Rotas dinâmicas e grupos de rotas
  4. API de metadados e SEO no App Router
← Voltar para React Academy