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

React é uma biblioteca, não um framework

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:

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:

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.

Essa convenção reduz o tempo de configuração inicial e torna a estrutura do projeto previsível para qualquer desenvolvedor que já conheça o framework.

Projeto 1: A arquitetura do projeto

Para entender melhor o funcionamento das rotas, vamos construir um exemplo prático que apresenta o roteamento do NextJS.

Porém, antes de colocar a mão no código vamos conhecer a arquitetura desse projeto e quais benefícios o NextJS traz para o desenvolvimento quando comparado ao React.