Next.js vs Node.js: como os dois se relacionam

Next.js vs Node.js: framework vs runtime, explicado | We.Inc

O Node.js roda JavaScript fora do navegador; o Next.js é um framework React que roda sobre ele. Veja a stack camada por camada, um endpoint nos dois e quando usar cada um.

O Node.js é um runtime: o programa que executa JavaScript em um servidor ou no seu notebook. O Next.js é um framework React para criar sites, e as ferramentas de build e o servidor dele rodam no Node.js. Então a escolha raramente é um ou outro. Todo app Next.js precisa do Node.js por baixo, enquanto um app Node.js não precisa envolver o Next.js.

Runtime versus framework

Pergunta

O que é
Runtime JavaScript
Framework React

Você instala como
Um programa na máquina
Um pacote npm em um projeto

Cria páginas web?
Só se você escrever esse código
Sim, com roteamento e renderização integrados

Trata HTTP?
Com node:http ou uma biblioteca como o Express
Páginas mais Route Handlers

Depende do outro?
Não
Sim, Node.js 20.9 no mínimo

Início em produção
next build, depois next start

O jeito mais rápido de ver a relação é olhar as camadas por onde uma requisição passa. Clique em cada camada de um app Next.js típico abaixo para ver o que ela faz e quem é responsável por ela.

Clique em uma camada, do navegador no topo ao sistema operacional na base.
Leia o que essa camada faz em um app Next.js.
Compare os exemplos do servidor Node.js puro e do Route Handler do Next.js mais abaixo.
Use as linhas de decisão da tabela para escolher o que o seu projeto precisa.

Confira node --version antes de instalar o Next.js. A documentação atual indica o Node.js 20.9 como mínimo.
Use uma versão de suporte de longo prazo do Node.js nos servidores, e fixe a mesma versão major localmente e em produção.
Se o seu projeto só serve uma API sem páginas web, um servidor Node.js puro ou um framework de backend é uma opção mais leve que o Next.js.
Uma exportação estática de um site Next.js só precisa do Node.js na hora do build. O resultado são arquivos simples que qualquer servidor web hospeda, ao custo de perder os recursos que dependem do servidor.

Perguntas frequentes

O Next.js é backend ou frontend?

Os dois, dentro de limites. Ele renderiza páginas React no servidor, envia as partes interativas ao navegador e permite escrever Route Handlers para endpoints JSON. Ele não foi feito para ser um backend completo para muitos outros clientes.

Preciso aprender Node.js antes do Next.js?

Você precisa do Node.js instalado e de alguma familiaridade com o npm e o terminal. Não é preciso conhecer a fundo o módulo node:http, porque o Next.js cuida do servidor para você.

O Next.js ainda tem um Edge Runtime?

A opção de rota runtime agora indica 'nodejs' como padrão e 'edge' como obsoleto. A documentação pede que você remova o export runtime dos arquivos de rota, então código novo deve assumir o Node.js.

Posso rodar o Next.js com Bun ou Deno?

A documentação de deploy do Next.js lista o Bun como adaptador verificado e o Deno Deploy entre outras plataformas com integração própria. O suporte a recursos varia fora do servidor Node.js, então confira as notas da plataforma.

O Express é o mesmo tipo de coisa que o Next.js?

Mais parecido do que o Node.js, já que os dois são bibliotecas sobre o Node.js. O Express é um kit mínimo de servidor HTTP; o Next.js é um framework completo de sites construído em torno do React.

Node.js em um parágrafo

O site do Node.js o descreve como um runtime JavaScript assíncrono e orientado a eventos, feito para criar aplicações de rede escaláveis. Na prática, ele permite que o JavaScript leia arquivos, abra portas de rede e converse com bancos de dados, coisas que um navegador não permite.

O que o Next.js adiciona por cima

O Next.js transforma uma pasta de componentes React em um site: rotas baseadas em arquivos, renderização no servidor, busca de dados, tratamento de imagens e fontes, e um servidor de produção. Quando você roda next start, esse servidor é um processo Node.js, e a documentação diz que esse tipo de deploy suporta todos os recursos do Next.js.
Durante o desenvolvimento acontece o mesmo com o next dev, e o next build roda no Node.js para compilar e pré-renderizar as páginas.

Escolhendo para um projeto

Vai criar um site ou app web com React? Use o Next.js e aceite o Node.js como parte da configuração. Vai criar uma ferramenta de linha de comando, um worker que processa uma fila ou uma API pura? Escreva direto para o Node.js ou com um framework de backend, e deixe o Next.js de lado.

Servidor Node.js puro

Usa só o módulo nativo node:http. Você decide a porta, os cabeçalhos e o roteamento. Rode com node server.mjs.

Route Handler do Next.js

O caminho do arquivo vira /api/hello e o Next.js roda o servidor. Caminhos desconhecidos recebem automaticamente a página 404 do framework.

Onde o Node.js roda em um projeto Next.js

scripts do package.json

Cada script inicia um processo Node.js: o servidor de desenvolvimento, o build de produção e o servidor de produção.

Navegador

O visitante

Recebe o HTML que o Next.js renderizou no servidor e depois carrega JavaScript só para os Client Components, para que botões e formulários funcionem.

O código do seu app

Você

Páginas, layouts e Route Handlers na pasta app. Isso é React mais algumas convenções do Next.js, escrito em JavaScript ou TypeScript.

O framework

Mapeia pastas para URLs, renderiza Server Components, empacota o código do cliente e roda o servidor de produção iniciado pelo next start.

O runtime

Executa todo o JavaScript acima no servidor: o build, o servidor de desenvolvimento e cada requisição em produção.

Sistema operacional

Sua hospedagem

macOS, Windows, Linux ou um container. O Next.js indica macOS, Windows incluindo WSL, e Linux como suportados para desenvolvimento.