Frameworks e Ecossistemas

Next.js App Router Cheat Sheet

Estrutura de arquivos, Fetching e componentes de servidor no Next.js.

Roteamento

Define a página principal de uma rota.

// app/page.tsx
export default function Page() { ... }

Define um layout compartilhado para as sub-rotas.

// app/layout.tsx
export default function Layout({ children }) { ... }

Componente para navegação entre páginas com prefetching.

import Link from 'next/link';
<Link href="/sobre">Sobre</Link>

Diretiva para tornar um componente executável no cliente.

"use client";

Fetching de dados no servidor com controle de cache.

const data = await fetch('https://api...', { cache: 'no-store' });

Hook para navegação programática no App Router.

import { useRouter } from 'next/navigation';

Configuração de metadados para SEO.

export const metadata = { title: 'Página' };