Framework Next.js: por que você ainda vai programar com ele

Neste artigo você vai conhecer o Next.js, um framework construído sobre o React que resolve limitações práticas da biblioteca React no desenvolvimento de aplicações reais.

React é uma biblioteca, não um framework

Figura 1. Criando um projeto React com Vite e estrutura de pastas gerada

O React é uma biblioteca de interfaces. Ele sabe renderizar componentes na tela, gerenciar estado e responder a eventos.

O que ele não faz é definir como as rotas funcionam, como os dados são buscados, como as páginas são pré-renderizadas ou como o projeto deve ser estruturado.

Essas decisões ficam a cargo do desenvolvedor. Em projetos pequenos isso não é um problema. Em projetos maiores, a falta de convenções leva a soluções diferentes em cada time, dificultando a manutenção.

O que o Next.js adiciona ao React

O Next.js parte do React e adiciona uma camada de convenções e funcionalidades que a biblioteca não oferece nativamente. Veja a comparação:

Recurso React puro Next.js
Roteamento Necessita de biblioteca externa (React Router) Baseado na estrutura de pastas, sem configuração
Busca de dados useEffect + fetch no cliente async/await direto no componente, no servidor
SEO Página em branco no carregamento inicial HTML pré-renderizado com os dados já presentes
Rotas de API Necessita de servidor Node.js separado Criadas dentro do mesmo projeto, na pasta app/api/
Otimização de imagens Manual Componente <Image> nativo com lazy loading e redimensionamento automático
Tabela 1. Comparação entre React puro e Next.js

O Next.js não substitui o React. Todo o conhecimento de componentes, useState, useEffect e props continua sendo usado da mesma forma. O framework apenas preenche as lacunas que a biblioteca deixa em aberto.

A estrutura de um projeto Next.js

A imagem abaixo mostra a pasta app/ de um projeto Next.js:

Figura 2. Estrutura de pastas de um projeto Next.js

O roteamento no Next.js é definido pela estrutura de pastas.

Um arquivo page.tsx dentro de app/blog/ cria automaticamente a rota /blog. Uma pasta app/api/newsletter/ com um arquivo route.ts cria o endpoint /api/newsletter. Não há arquivo de configuração de rotas."

[...] continue lendo...

Artigos relacionados