Next.js vs React: o que o Next adiciona e quando você precisa dele
Next.js vs React
Next.js vs React: biblioteca vs framework, quando o Vite basta | We.Inc
React é uma biblioteca de UI; Next.js é um framework construído sobre ela. Marque os recursos de que seu projeto precisa e veja se Next.js ou React puro com Vite se encaixa, com código para os dois.
React é uma biblioteca para construir interfaces a partir de componentes. Next.js é um framework que usa React e adiciona roteamento baseado em arquivos, renderização no servidor, server components, endpoints de API e ferramentas de build. Você escreve React de qualquer jeito. Escolha Next.js quando as páginas precisam de HTML renderizado no servidor, segredos ou rotas de backend; React puro com Vite serve para apps que ficam atrás de um login.
O que vem pronto
Necessidade
React com Vite
Next.js (App Router)
Componentes, estado, hooks
Sim
Sim, o mesmo React
Roteamento
Adicione uma biblioteca de rotas
Pastas em app/ viram rotas
HTML renderizado antes de o JavaScript carregar
Não, a menos que você adicione SSR ou pré-renderização
Sim, no servidor ou no build
Server components e segredos no servidor
Não
Sim, layouts e páginas são server components por padrão
Endpoints de API no mesmo projeto
Não, backend separado
Arquivos route.ts
Saída
Arquivos estáticos do vite build
Servidor Node, ou arquivos estáticos com output: 'export'
Marque os recursos de que seu projeto precisa. Cada um aparece como embutido no Next.js ou fácil em um app React com Vite, e a contagem dá uma recomendação inicial. O código abaixo mostra a mesma pequena página escrita dos dois jeitos.
Marque cada recurso de que seu projeto precisa agora, não algum dia.
Veja para qual lado cada recurso pende e por quê.
Leia a contagem e a recomendação abaixo da lista.
Compare os dois exemplos de código para ver o quanto muda.
Seu conhecimento de React se aproveita por completo. Componentes, hooks e JSX são idênticos; o que muda é onde ficam os arquivos e onde o código roda.
No Next.js, adicione 'use client' só nos arquivos que precisam de estado, efeitos ou APIs do navegador. Marcar um layout inteiro como cliente envia muito mais JavaScript.
Um app Vite são arquivos estáticos, então pode ficar em qualquer hospedagem estática. Um app Next.js que usa recursos de servidor precisa de uma hospedagem que rode Node ou o adaptador de plataforma que você escolher.
Se o tráfego de busca importa, confira o que a sua página envia antes de o JavaScript rodar. Veja o código-fonte de uma single page app com Vite e você vai encontrar basicamente uma div root vazia.
Perguntas frequentes
Next.js é melhor que React?
Eles não são alternativas no sentido usual, porque o Next.js roda React. A pergunta real é se você quer o roteamento, a renderização no servidor e as convenções de um framework, ou uma configuração mais leve em que você mesmo escolhe cada peça.
O time do React ainda recomenda o Create React App?
O guia atual do react.dev recomenda começar com um framework como Next.js ou React Router, e lista Vite, Parcel e Rsbuild para montar sua própria configuração do zero. Ele não lista o Create React App.
O Next.js pode gerar um site estático como o Vite?
Sim. Defina output: 'export' no next.config.js e o next build grava HTML, CSS e JavaScript em uma pasta out. Recursos que precisam de um servidor rodando, como cookies, rewrites, redirects e server actions, não ficam disponíveis nesse modo.
Devo aprender React antes do Next.js?
Aprenda primeiro o básico de React: componentes, props, estado e efeitos. O Next.js então adiciona roteamento e conceitos de servidor por cima, e depurar fica muito mais fácil quando você sabe qual problema pertence a qual camada.
Um app React com Vite é ruim para SEO?
Não automaticamente, mas por padrão o HTML não tem conteúdo da página até o JavaScript rodar. Páginas de marketing que precisam ranquear ficam mais fáceis com renderização no servidor ou pré-renderização; dashboards atrás de um login não precisam disso.
Biblioteca versus framework
O React decide como um componente transforma estado em UI e atualiza a página. Ele não decide como as URLs se ligam às telas, onde os dados carregam ou como o projeto é compilado. Essas escolhas são suas em um app Vite e do Next.js em um app Next.
Essa é a troca: o Next.js tira decisões das suas mãos e adiciona recursos de servidor, e em troca você segue as convenções de pastas dele e roda o build dele.
O que muda no seu código
No Next.js, app/blog/page.tsx é a rota /blog e layout.tsx envolve os filhos. As páginas são server components, a não ser que você marque o contrário, então podem esperar dados diretamente, e as partes interativas ficam em arquivos que começam com 'use client'.
Em um app Vite, main.tsx renderiza um componente raiz no index.html, as rotas vêm de uma biblioteca como React Router e os dados carregam no navegador via fetch ou um cache no cliente.
Quando React puro com Vite basta
Ferramentas internas, dashboards, editores e qualquer coisa atrás de um login raramente precisam de HTML renderizado no servidor. Um app Vite inicia rápido, é publicado como arquivos estáticos e mantém o modelo mental pequeno.
Se um app assim precisar depois de páginas públicas, é comum colocar as páginas de marketing em um site separado e manter o app como está.
A mesma página, dos dois jeitos
Next.js: uma rota que carrega dados no servidor
O caminho do arquivo é a URL. A página espera os dados antes de o HTML ser enviado; só o botão vai como JavaScript de cliente.
React com Vite: a mesma lista carregada no navegador
O roteamento vem do React Router, e a lista aparece depois que o navegador a busca.
Iniciando qualquer um dos projetos
Os dois comandos fazem algumas perguntas, incluindo se você quer usar TypeScript.
Páginas públicas que precisam ranquear na busca
HTML gerado no servidor ou no build coloca o conteúdo na primeira resposta.
Consultas ao banco ou chaves de API usadas durante a renderização
Server components mantêm as credenciais fora do bundle do navegador.
Endpoints de backend no mesmo projeto
Arquivos route.ts viram endpoints de API.
Muitas páginas de conteúdo com layouts compartilhados
Roteamento por pastas e layouts aninhados já vêm prontos.
Tudo fica atrás de um login
Os rastreadores nunca veem, então renderizar no navegador funciona bem.
A hospedagem precisa ser só arquivos estáticos
O vite build gera arquivos estáticos; o Next.js também consegue, mas perde os recursos de servidor.
Um widget ou ferramenta embutido em outro site
Um bundle e um elemento raiz são mais simples de encaixar.
Aprender o próprio React
Menos conceitos de uma vez: nenhuma divisão entre servidor e cliente para entender.
O que se encaixa no seu projeto?
Necessidades do projeto
React com Vite
Next.js: {n}. React com Vite: {v}.
Marque pelo menos uma necessidade para receber uma recomendação.
Pende para o Next.js. Suas necessidades dependem de renderização no servidor ou de código de servidor.
React puro com Vite resolve isto. Você pode adicionar um framework depois, se surgirem páginas públicas.
Está equilibrado. Escolha Next.js se alguma página pública precisar ranquear; caso contrário, comece com Vite.