Next.js: Introdução ao Next.js 16

// app/dashboard/page.tsx — Server Component Padrão
export default async function DashboardPage() {
  const tasks = await fetch('https://api.example.com/tasks');
  const projects = await fetch('https://api.example.com/projects');

  return (
    <div className="grid grid-cols-2 gap-4">
      <TaskSummary tasks={tasks} />
      <ProjectList projects={projects} />
    </div>
  );
}

Diagrama: Next.js 16; App Router Roteamento de Sistema de Arquivos; Motor de Renderização SSR/SSG/ISR/PPR; Coleta de Dados Server Components; API Routes Route Handlers; Ferramentas de Build Turbopack.

# 1. Usar create-next-app para Criar um Projeto(Recomendado)
npx create-next-app@latest my-next-app --ts --tailwind --app

# 2. Entrar no diretório do projeto
cd my-next-app

# 3. Iniciar o servidor de desenvolvimento(Turbopack Padrão)
npm run dev

# 4. Excerto da saída do terminal
▲  ▲  ▲  ▲  ▲  ▲
 ▲  Next.js 16.2.10 (Turbopack)
 ▲  Local:        http://localhost:3000
 ▲  Environments: .env.local

▲ Next.js 16.2.10
- Local: http://localhost:3000
✓ Pronto em 876ms (Turbopack)

O servidor de desenvolvimento está rodando em http://localhost:3000. Abra este URL em um navegador para ver a página de boas-vindas padrão do Next.js.

// app/page.tsx — Uma página = Coleta de Dados + Renderização + Interação
export default async function HomePage() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  return (
    <main>
      <h1 className="text-2xl font-bold">Bem-vindo ao Next.js 16</h1>
      <p>Conteúdo renderizado no servidor: {data.title}</p>
    </main>
  );
}

<h1>Bem-vindo ao Next.js 16</h1>
<p>Conteúdo renderizado no servidor: sunt aut facere repellat provident</p>

O navegador renderiza: Um título "Bem-vindo ao Next.js 16" e conteúdo renderizado no servidor da API — os dados foram buscados no servidor e entregues como HTML pré-renderizado.

// Pages Router Modelo Antigo (v12)
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}
export default function Page({ data }) {
  return <div>{data}</div>; // Todo o código está no lado do cliente
}

// App Router Novo Modelo (v16)
export default async function Page() {
  const data = await fetchData(); // Recuperar diretamente dentro do componente
  return <div>{data}</div>; // Server Component Padrão
}

Renderiza a UI do componente Page.

// ============================================
// Pages Router (pages/posts/[id].tsx)
// Requer exportação adicional getServerSideProps
// ============================================
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}
export default function PostPage({ post }) {
  return <h1>{post.title}</h1>;
}

// ============================================
// App Router (app/posts/[id]/page.tsx)
// Componente async direto, Sem exportação adicional necessária
// ============================================
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  return <h1>{post.title}</h1>;
}

Pages Router: 18 linhas de código (incluindo getServerSideProps)
App Router: 8 Executar o código(Componente async direto)
Economia 55% Código de Exemplo

O App Router reduz boilerplate em 55%: sem getServerSideProps necessário, componente async direto, e busca de dados automática dentro do corpo do componente.

# Next.js 16 Iniciar o servidor de desenvolvimento, Usar por padrão Turbopack
npm run dev

# Saída do Console
▲  ▲
▲  Next.js 16.2
▲  - Local: http://localhost:3000
▲  - Turbopack (experimental): ✓ carregado em 876ms

# Salvar após editar qualquer arquivo — Hotfixes Instantâneos
✔ Atualizado /app/page.tsx em 3ms

Tempo de Inicialização Turbopack: 876ms
Tempo de Liberação de Hotfix: 3ms
Comparação Webpack Cold Start: 5-10s

Turbopack HMR: 4ms por atualização de arquivo (vs 50-200ms com Webpack). Cold start: 876ms (vs 5-10s). Builds de projetos grandes: 10x mais rápido geral.

// app/page.tsx — Uso de instruções use cache
import { unstable_cache as cache } from 'next/cache';

export default async function Page() {
  const data = await getData();
  return <div>{JSON.stringify(data)}</div>;
}

const getData = cache(
  async () => {
    return fetch('https://api.example.com/expensive-data');
  },
  ['expensive-data'],
  { revalidate: 3600 }
);

Busca dados e renderiza o resultado.

// ============================================
// PPR Shell estático + use cache Cache Inteligente
// Home = Cabeçalho Estático + Recomendações de Conteúdo Dinâmico (cache 1 hora)
// ============================================

// app/page.tsx
import { Suspense } from 'react';
import { RecommendedProducts } from './RecommendedProducts';

export default function HomePage() {
  return (
    <div>
      <header className="bg-gray-100 p-4">
        <h1>Bem-vindo ao ShopHub</h1>
        <nav>Categorias | Ofertas | Suporte</nav>
      </header>

      {/* Limite PPR: Recomendações de Conteúdo Dinâmico */}
      <Suspense fallback={<div className="animate-pulse h-40 bg-gray-200" />}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}

Renderiza um shell estático imediatamente, com conteúdo dinâmico carregando dentro de limites Suspense.
Texto visível: Bem-vindo ao ShopHub | Categorias | Ofertas | Suporte

// app/RecommendedProducts.tsx
import { unstable_cache as cache } from 'next/cache';

const getProducts = cache(
  async () => {
    return fetch('https://fakestoreapi.com/products?limit=4');
  },
  ['recommended-products'],
  { revalidate: 3600 }
);

export async function RecommendedProducts() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {products.map(p => (
        <div key={p.id} className="border rounded p-2">
          <img src={p.image} alt={p.title} className="h-32" />
          <p className="font-bold">{p.title}</p>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
}

Quando a página carrega:
1. Cabeçalho Estático(Barra de Navegação) Mostrar Agora
2. Área de Recomendações Exibir Tela Skeleton(Animação Placeholder Cinza)
3. Uma vez que os dados estão prontos, 4 Streaming de Renderização de Cards de Produtos
4. O mesmo usuário 1 Visitas repetidas dentro de uma hora são servidas do cache, Sem necessidade de reiniciar fetch

A página renderiza como descrito acima, com a UI atualizando baseada no comportamento descrito.

// ============================================
// Server Action: Submissão de formulário chama diretamente uma função backend
// Sem necessidade de criar manualmente API Route
// ============================================

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    // Escrever diretamente no banco de dados ou enviar um email
    console.log(`Novo contato: ${name} <${email}>`);
    // Redirecionar para a página de sucesso
    redirect('/contact/success');
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Seu nome" required />
      <input name="email" type="email" placeholder="Seu email" required />
      <button type="submit">Enviar</button>
    </form>
  );
}

Um formulário com campos de entrada e um botão de enviar.
Ao enviar, a server action processa os dados e redireciona para uma página de sucesso.

Depois que o formulário é submetido:
1. handleSubmit Funções são executadas no servidor
2. formData Coleta Automaticamente Campos do Formulário
3. redirect Execução Servidor 303 Redirect
4. Sem codificação necessária API Route / fetch Código

// ============================================
// Exemplo Abrangente: Página de Detalhes de Produto E-commerce
// Recursos: Diretório Estático SSG + Recomendações PPR + Comentários ISR
// ============================================

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// Geração de Parâmetros de Página Estática(Pré-generar durante o build)
export async function generateStaticParams() {
  const products = await fetch('https://fakestoreapi.com/products');
  const ids = await products.json();
  return ids.map(p => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://fakestoreapi.com/products/${params.id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-4">
      {/* Seção Estática: Informações Básicas do Produto */}
      <div className="flex gap-8">
        <img src={product.image} alt={product.title} className="w-64 h-64" />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600">${product.price}</p>
          <p className="mt-4">{product.description}</p>
        </div>
      </div>

      {/* Limite Dinâmico PPR: Produtos Recomendados */}
      <Suspense fallback={<div>Carregando recomendações...</div>}>
        <Recommendations category={product.category} />
      </Suspense>

      {/* Seção de Comentários ISR: Regenerar a cada hora */}
      <Suspense fallback={<div>Carregando avaliações...</div>}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// app/products/[id]/Recommendations.tsx
async function Recommendations({ category }) {
  const products = await fetch(
    `https://fakestoreapi.com/products/category/${category}`
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Produtos Recomendados</h2>
      <div className="grid grid-cols-4 gap-4 mt-4">
        {products.slice(0, 4).map(p => (
          <div key={p.id} className="border p-2 rounded">{p.title}</div>
        ))}
      </div>
    </div>
  );
}

// app/products/[id]/Reviews.tsx
async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/reviews/${productId}`,
    { next: { revalidate: 3600 } }
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Avaliações de Clientes</h2>
      {reviews.map(r => (
        <div key={r.id} className="border-b py-2">
          <p className="font-bold">{r.author}</p>
          <p>{r.content}</p>
        </div>
      ))}
    </div>
  );
}

1. Informações Básicas do Produto Exibidas Instantaneamente(HTML Estático SSG)
2. Áreas Recomendadas Exibem "Carregando recomendações..." Placeholder
3. Seção de Comentários Exibe "Carregando avaliações..." Placeholder
4. Renderização Streaming de Conteúdo Recomendado(PPR)
5. Conteúdo de comentários em cache 1 Atualizar conforme necessário após X horas(ISR)
6. A página inteira está completa com Metadados SEO