Next.js para Iniciantes: Guia Completo para Construir Aplicações Modernas

Se você já trabalha com React ou está começando no desenvolvimento web e busca construir aplicações modernas, escaláveis e otimizadas para performance e SEO, o Next.js é uma ferramenta que você precisa conhecer. Este guia prático foi feito para desenvolvedores iniciantes, profissionais em transição de carreira e qualquer pessoa técnica que queira dominar o Next.js do zero, focando em sua arquitetura, benefícios e como desenvolver aplicações React de alta performance com o App Router.

Vamos desmistificar os conceitos-chave, como o roteamento baseado em arquivos, as estratégias de renderização (SSR e SSG) e a fundamental separação entre Server e Client Components. Prepare-se para construir suas primeiras páginas em Next.js e entender os cuidados práticos para evitar armadilhas comuns, reconhecendo a curva de aprendizado que acompanha a flexibilidade dessa poderosa ferramenta.

O que é Next.js e como ele estende o React tradicional

O Next.js é um framework React para construir aplicações web full-stack, oferecendo recursos e otimizações adicionais ao React. Enquanto o React é uma biblioteca para construir interfaces de usuário, o Next.js a eleva, adicionando funcionalidades essenciais para aplicações de produção, como roteamento, renderização no servidor, otimização de imagens e muito mais. Ele transforma o React de uma biblioteca de UI em um framework completo, capaz de lidar tanto com o frontend quanto com aspectos do backend, como APIs e busca de dados diretamente no servidor.

Para quem já sabe criar um projeto em React ou está avaliando as diferenças entre Angular e React, o Next.js se apresenta como uma evolução natural, resolvendo desafios como SEO (Search Engine Optimization) e performance que são inerentes às Single Page Applications (SPAs) tradicionais. Ele faz isso ao permitir que partes da sua aplicação sejam pré-renderizadas no servidor antes de serem enviadas ao navegador, resultando em carregamentos mais rápidos e melhor indexação por motores de busca.

Criando o primeiro projeto: create-next-app e a estrutura do App Router

Começar um projeto Next.js é simples e direto. Certifique-se de ter o Node.js instalado em sua máquina. Em seguida, abra seu terminal e execute o comando:

npx create-next-app@latest meu-primeiro-nextjs

Durante a instalação, você será questionado sobre algumas configurações, como o uso de TypeScript, ESLint e, crucialmente, se deseja usar o App Router (a resposta recomendada para este guia é sim). Após a conclusão, navegue até o diretório do projeto (cd meu-primeiro-nextjs) e inicie o servidor de desenvolvimento com npm run dev (ou yarn dev, pnpm dev).

A estrutura de pastas do App Router é um dos pilares do Next.js moderno. Diferente das versões anteriores, o App Router utiliza o diretório app/ para definir as rotas da sua aplicação. Veja um exemplo:

meu-primeiro-nextjs/
├── app/
│   ├── layout.tsx         // Layout global da aplicação
│   ├── page.tsx           // Página inicial (rota /)
│   ├── blog/
│   │   ├── layout.tsx     // Layout específico para rotas de blog (ex: /blog, /blog/post-1)
│   │   ├── page.tsx       // Página principal do blog (rota /blog)
│   │   └── [slug]/
│   │       └── page.tsx   // Página de post individual (rota /blog/post-do-blog)
│   └── produtos/
│       ├── page.tsx       // Página de produtos (rota /produtos)
│       └── [id]/
│           └── page.tsx   // Página de produto individual (rota /produtos/123)
├── public/
│   └── ...                // Arquivos estáticos (imagens, etc.)
└── ...

Nessa estrutura, cada pasta dentro de app/ representa um segmento de rota. O arquivo page.tsx (ou .js) é o responsável por renderizar a UI de uma rota específica, enquanto o layout.tsx (ou .js) define a interface compartilhada para um segmento de rota e seus filhos.

Roteamento baseado em arquivos: rotas estáticas, dinâmicas e layouts

O roteamento no Next.js é intuitivo e baseado no sistema de arquivos, eliminando a necessidade de bibliotecas de roteamento externas como o React Router. Cada arquivo page.tsx dentro do diretório app/ automaticamente se torna uma rota acessível via URL.

• Rotas Estáticas: Uma pasta como app/about/page.tsx cria a rota /about. O conteúdo de page.tsx será renderizado quando o usuário acessar essa URL.

• Rotas Dinâmicas: Para criar rotas com parâmetros variáveis, como /blog/meu-primeiro-post ou /produtos/123, você usa colchetes [] no nome da pasta. Por exemplo, app/blog/[slug]/page.tsx cria uma rota dinâmica onde [slug] pode ser qualquer valor. Dentro do seu componente page.tsx, você pode acessar esse parâmetro através dos props da página.

  // app/blog/[slug]/page.tsx
  export default function BlogPostPage({ params }: { params: { slug: string } }) {
    return (
      <div>
        <h1>Post: {params.slug}</h1>
        <p>Conteúdo do post dinâmico.</p>
      </div>
    );
  }

• Layouts Compartilhados: O arquivo layout.tsx permite definir uma interface de usuário que é compartilhada entre várias rotas. Um layout.tsx na raiz de app/ (ex: app/layout.tsx) se aplica a toda a aplicação. Já um layout.tsx dentro de uma subpasta (ex: app/blog/layout.tsx) se aplica apenas às rotas dentro daquele segmento (/blog, /blog/[slug]). Isso é extremamente útil para manter cabeçalhos, rodapés e barras laterais consistentes sem duplicar código.

  // app/blog/layout.tsx
  export default function BlogLayout({ children }: { children: React.ReactNode }) {
    return (
      <section>
        <h2>Seção de Blog</h2>
        {children} {/* Aqui as páginas filhas (page.tsx) serão renderizadas */}
      </section>
    );
  }

Server Components vs. Client Components: quando usar a diretiva ‘use client’

Esta é uma das maiores mudanças e um dos conceitos mais importantes do App Router. O Next.js introduziu os Server Components como padrão, permitindo que você escreva componentes React que são renderizados no servidor, antes mesmo de chegar ao navegador. Isso traz benefícios significativos para performance e SEO.

• Server Components (Padrão):

  • Rodam no servidor. Não têm acesso a APIs do navegador (como window ou localStorage).
  • Não podem usar useState, useEffect ou manipuladores de eventos (como onClick).
  • Ideais para buscar dados, acessar bancos de dados ou APIs diretamente, e renderizar conteúdo estático ou pré-gerado.
  • São o padrão no diretório app/. Você não precisa de nenhuma diretiva especial para usá-los.

  Exemplo de Server Component buscando dados:

  // app/dashboard/page.tsx (Server Component)
  async function getWeatherData() {
    const res = await fetch('https://api.example.com/weather');
    return res.json();
  }
  
  export default async function DashboardPage() {
    const weather = await getWeatherData();
    return (
      <div>
        <h1>Previsão do Tempo</h1>
        <p>Cidade: {weather.city}</p>
        <p>Temperatura: {weather.temperature}°C</p>
      </div>
    );
  }

• Client Components ('use client' ):

  • Rodam no navegador. Têm acesso total às APIs do navegador.
  • Podem usar useState, useEffect, onClick e outras funcionalidades interativas do React.
  • Ideais para interatividade, gerenciamento de estado local e qualquer funcionalidade que dependa do JavaScript do lado do cliente.
  • Para transformar um componente em Client Component, adicione a diretiva 'use client' no topo do arquivo.

  Exemplo de Client Component com estado local:

  // components/Counter.tsx (Client Component)
  'use client';
  
  import { useState } from 'react';
  
  export default function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>Contador: {count}</p>
        <button onClick={() => setCount(count + 1)}>Incrementar</button>
      </div>
    );
  }

  Evitando Erros de Hidratação:

  O erro de hidratação acontece quando a árvore HTML renderizada previamente no servidor não corresponde exatamente ao que o código JavaScript tenta renderizar no navegador. Para resolver, garanta que qualquer componente que dependa de APIs do navegador ou de estado local seja um Client Component, ou que o código que usa essas APIs seja executado apenas após a montagem do componente no cliente (por exemplo, dentro de um useEffect). A diretiva 'use client' é a principal ferramenta para evitar esse tipo de erro, pois ela sinaliza ao Next.js que aquele componente e seus filhos devem ser renderizados no cliente.

Estratégias de renderização: entenda a diferença entre SSR e SSG

O Next.js oferece flexibilidade nas estratégias de renderização, permitindo que você escolha a melhor abordagem para cada página da sua aplicação, otimizando performance e consumo de recursos. As duas principais são Server-Side Rendering (SSR) e Static Site Generation (SSG).

• Static Site Generation (SSG):

  • Conceito: No SSG, o HTML de uma página é gerado uma única vez durante o tempo de compilação (build) da aplicação. Esse HTML pré-gerado é então servido diretamente aos usuários através de uma CDN (Content Delivery Network).
  • Casos de Uso: Ideal para páginas com conteúdo que não muda com frequência, como blogs, páginas de marketing, documentação e e-commerce com produtos estáveis. Oferece a melhor performance e segurança, pois o servidor não precisa processar nada a cada requisição.
  • Implementação: No App Router, a busca de dados em Server Components é por padrão SSG se não houver uso de revalidate ou cache: 'no-store' no fetch.

• Server-Side Rendering (SSR):

  • Conceito: No SSR, o HTML é gerado dinamicamente no servidor a cada nova requisição feita pelo usuário. Isso significa que o servidor processa a página, busca os dados mais recentes e envia um HTML completo e atualizado para o navegador.
  • Casos de Uso: Perfeito para páginas com conteúdo altamente dinâmico que precisa estar sempre atualizado, como feeds de notícias em tempo real, dashboards personalizados ou resultados de busca. Garante que o usuário sempre veja os dados mais recentes.
  • Implementação: No App Router, você pode forçar o SSR utilizando a função fetch com a opção cache: 'no-store' ou configurando a exportação dynamic = 'force-dynamic' em uma page.tsx ou layout.tsx.

Trade-offs: O SSG é mais rápido e barato para servir, mas o conteúdo não é atualizado em tempo real sem revalidação. O SSR garante dados frescos, mas exige mais recursos do servidor a cada requisição e pode ser ligeiramente mais lento no primeiro carregamento.

Otimizações nativas de SEO e performance com next/image e next/font

Um dos grandes diferenciais do Next.js são suas otimizações nativas, que ajudam a garantir que sua aplicação tenha excelentes pontuações nos Core Web Vitals e um bom desempenho de SEO, muitas vezes sem a necessidade de bibliotecas do React que facilitam o desenvolvimento externas para essas tarefas.

• next/image: O componente Image de next/image otimiza automaticamente suas imagens para a web. Ele faz isso redimensionando, otimizando o formato (como WebP) e aplicando carregamento lazy-load por padrão. Isso significa que as imagens só são carregadas quando entram na viewport do usuário, melhorando significativamente o tempo de carregamento da página e reduzindo o consumo de banda.

  import Image from 'next/image';
  
  export default function MyImageComponent() {
    return (
      <Image
        src="/images/minha-imagem.jpg"
        alt="Descrição da imagem"
        width={500} // Largura original da imagem
        height={300} // Altura original da imagem
        priority // Carrega a imagem imediatamente (para LCP)
      />
    );
  }

• next/font: O módulo next/font otimiza automaticamente as fontes da sua aplicação, removendo requisições de rede externas e garantindo que as fontes sejam carregadas de forma eficiente. Ele previne o “layout shift” (mudança de layout) que ocorre quando as fontes são carregadas tardiamente, impactando negativamente a experiência do usuário e o Core Web Vitals (Cumulative Layout Shift - CLS).

  // app/layout.tsx
  import { Inter } from 'next/font/google';
  
  const inter = Inter({ subsets: ['latin'] });
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="pt-BR" className={inter.className}>
        <body>{children}</body>
      </html>
    );
  }

Essas ferramentas embutidas são um exemplo de como o Next.js simplifica a construção de aplicações de alta performance, permitindo que você se concentre na lógica de negócio, enquanto o framework cuida das otimizações de infraestrutura.

Dominar o Next.js para iniciantes pode parecer um desafio inicial devido aos novos conceitos como o App Router e a distinção entre Server e Client Components. No entanto, os benefícios em termos de performance, SEO e produtividade são inegáveis. Ao seguir este guia, você terá uma base sólida para começar a construir aplicações modernas e eficientes, aproveitando o poder do React com as otimizações que o Next.js oferece.

Continue praticando, explorando a documentação oficial e construindo pequenos projetos. A melhor forma de aprender é colocando a mão na massa!

Perguntas Frequentes sobre Next.js para Iniciantes

Preciso dominar React antes de começar a aprender Next.js?

Sim. É recomendável ter uma boa base de JavaScript moderno e fundamentos de React (como componentes, props e estados), pois o Next.js utiliza essa mesma sintaxe e estende as capacidades da biblioteca. Entender o React primeiro facilitará muito o aprendizado dos conceitos adicionais do Next.js.

Qual é a diferença básica entre Server-Side Rendering (SSR) e Static Site Generation (SSG)?

No SSG, o HTML de uma página é gerado uma única vez durante o tempo de compilação (build) e servido como um arquivo estático. No SSR, o HTML é gerado dinamicamente no servidor a cada nova requisição feita pelo usuário, garantindo que o conteúdo esteja sempre atualizado.

Por que ocorre o erro de hidratação (Hydration Error) e como resolvê-lo?

O erro de hidratação acontece quando a árvore HTML renderizada previamente no servidor não corresponde exatamente ao que o código JavaScript tenta renderizar no navegador. Ele pode ser resolvido garantindo que componentes que usam APIs do navegador ou estado local rodem apenas no cliente (utilizando a diretiva 'use client') ou checando se o componente está montado antes de executar código específico do cliente.

O Next.js torna o React tradicional ou o Vite obsoletos?

Não. O Next.js é excelente para produtos que exigem SEO, rotas complexas e renderização no servidor. Projetos como dashboards internos, ferramentas administrativas ou SPAs (Single Page Applications) simples ainda funcionam perfeitamente e costumam ser mais leves com React puro via Vite. A escolha depende das necessidades específicas do projeto.

Referências

• Next.js Docs - Getting Started
• Next.js Docs - Server-Side Rendering
• Next.js Docs - Routing
• Next.js Docs - Optimizing
• Next.js Docs - Server Components
• Next.js Docs - Installation