Padrões de App Router do Next.js

Padrões abrangentes para arquitetura do App Router do Next.js 14+, Server Components e desenvolvimento React full-stack moderno.

Quando Usar Esta Habilidade

• Construindo novas aplicações Next.js com App Router
• Migrando do Pages Router para o App Router
• Implementando Server Components e streaming
• Configurando rotas paralelas e interceptoras
• Otimizando a busca e o cache de dados
• Construindo funcionalidades full-stack com Server Actions

Conceitos Principais

1. Modos de Renderização

2. Convenções de Arquivos

app/
├── layout.tsx       # Shared UI wrapper
├── page.tsx         # Route UI
├── loading.tsx      # Loading UI (Suspense)
├── error.tsx        # Error boundary
├── not-found.tsx    # 404 UI
├── route.ts         # API endpoint
├── template.tsx     # Re-mounted layout
├── default.tsx      # Parallel route fallback
└── opengraph-image.tsx  # OG image generation

Início Rápido

// app/layout.tsx
import { Inter } from 'next/font/google'
import { Providers } from './providers'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: { default: 'My App', template: '%s | My App' },
  description: 'Built with Next.js App Router',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/page.tsx - Server Component by default
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // ISR: revalidate every hour
  })
  return res.json()
}

export default async function HomePage() {
  const products = await getProducts()

  return (
    <main>
      <h1>Products</h1>
      <ProductGrid products={products} />
    </main>
  )
}

Padrões detalhados e exemplos práticos

A documentação detalhada dos padrões está em references/details.md. Leia este arquivo quando o nível de navegação acima for insuficiente.

Melhores Práticas

O Que Fazer

• Comece com Server Components - Adicione 'use client' apenas quando necessário
• Coloque a busca de dados perto de onde é usada - Busque dados onde eles são utilizados
• Use limites do Suspense - Habilite o streaming para dados lentos
• Aproveite as rotas paralelas - Estados de carregamento independentes
• Use Server Actions - Para mutações com aprimoramento progressivo

O Que Não Fazer

• Não passe dados serializáveis - Limitações da fronteira Servidor → Cliente
• Não use hooks em Server Components - Sem useState, useEffect
• Não busque dados em Client Components - Use Server Components ou React Query
• Não aninhe layouts em excesso - Cada layout adiciona à árvore de componentes
• Não ignore estados de carregamento - Sempre forneça loading.tsx ou Suspense