NestJS vs Next.js: papéis diferentes, muitas vezes no mesmo projeto
NestJS vs Next.js: framework de backend ou framework React? | We.Inc
NestJS cria APIs de servidor em Node.js; Next.js cria sites React com um pouco de código de servidor. Veja o mesmo endpoint nos dois, como eles trabalham juntos e quando você precisa de cada um.
NestJS e Next.js não são rivais. NestJS é um framework para aplicações Node.js do lado do servidor: controllers, módulos e injeção de dependência para APIs. Next.js é um framework React para criar páginas web, com Route Handlers para trabalho leve de backend. Apps pequenos podem viver inteiros no Next.js; sistemas maiores muitas vezes colocam uma API NestJS por trás de um front-end Next.js.
Para que serve cada framework
Pergunta
NestJS
Função principal
Aplicações do lado do servidor e APIs
Sites e web apps em React
Renderiza páginas?
Não, ele devolve dados
Sim, Server e Client Components
Linguagem
Feito com TypeScript, JavaScript permitido
JavaScript ou TypeScript
Camada HTTP
Express por padrão, Fastify opcional
Servidor próprio via next start
Estilo de endpoint
Classe @Controller com métodos @Get
route.ts exportando GET, POST e assim por diante
Iniciar um projeto
nest new project-name
npx create-next-app@latest
Porta local padrão
Abaixo está um endpoint, uma lista de gatos em GET /cats, escrito como um controller NestJS e como um Route Handler do Next.js. Troque de exemplo para ver uma rota POST e a configuração que permite a uma página Next.js chamar uma API NestJS.
Escolha um exemplo: uma listagem GET, uma criação POST ou a ligação entre os dois apps.
Leia o código NestJS à esquerda e o código Next.js à direita.
Use a nota para ver o que cada framework entrega de graça.
Copie a versão que se encaixa no seu projeto.
Os dois servidores de desenvolvimento usam a porta 3000 por padrão. Quando rodar os dois lado a lado, inicie o NestJS em outra porta, como 3001.
Se o navegador chama a API NestJS diretamente, ative o CORS no NestJS para a origem do seu site. Se só o código de servidor do Next.js a chama, o CORS não entra em jogo.
Guarde o endereço da API em uma variável de ambiente só do servidor quando apenas Server Components ou Route Handlers a chamam.
Compartilhe os tipos de requisição e resposta por um pequeno pacote que os dois apps importam, para que um campo renomeado quebre o build e não a produção.
Perguntas frequentes
O Next.js pode substituir o NestJS?
Para um app pequeno, muitas vezes sim. Os Route Handlers cobrem GET, POST, PUT, PATCH, DELETE, HEAD e OPTIONS com as APIs Web Request e Response. O NestJS justifica seu lugar quando o backend cresce: muitos módulos, jobs em segundo plano, vários clientes como apps mobile e um time que quer uma estrutura imposta.
O NestJS consegue renderizar páginas React?
Ele não foi feito para isso. O NestJS devolve dados, com objetos serializados em JSON por padrão. Use Next.js, ou outro framework de front-end, para as páginas.
Preciso de TypeScript para usar NestJS?
O NestJS é feito com TypeScript e tem suporte completo a ele, e a documentação diz que você ainda pode escrever JavaScript simples. Quase todo exemplo e guia usa TypeScript, então conte com usá-lo.
Os dois devem ficar no mesmo repositório?
Um monorepo com dois apps e um pacote de tipos compartilhado funciona bem para um time. Repositórios separados servem para times separados, com calendários de release próprios.
Qual devo aprender primeiro?
Se você quer colocar um site no ar, comece pelo Next.js. Aprenda NestJS quando estiver criando uma API da qual vários front-ends ou serviços dependem.
O que o NestJS dá a um backend
O NestJS se descreve como um framework para criar aplicações Node.js do lado do servidor eficientes e escaláveis. Ele organiza o código em módulos, controllers e providers e os conecta com injeção de dependência, o que mantém uma API grande consistente entre muitos desenvolvedores.
Por baixo dos panos, ele roda sobre Express por padrão. Trocar pelo adaptador @nestjs/platform-fastify muda a camada HTTP sem reescrever os controllers, embora os middlewares específicos do Express precisem então de um equivalente no Fastify.
O que o Next.js dá a um site
O Next.js renderiza React no servidor, faz o roteamento pelos nomes de pastas e arquivos e envia ao navegador só as partes interativas. Os Route Handlers dele bastam para envios de formulário, webhooks e pequenos endpoints JSON que pertencem ao mesmo site.
O que ele não tenta ser é um backend estruturado para outros clientes. Não há sistema de módulos nem injeção de dependência, então uma API grande feita só de arquivos de rota tende a perder a consistência.
Como eles se encaixam
A divisão comum é Next.js para todas as páginas e NestJS para a lógica de negócio e os dados. Os Server Components do Next.js buscam dados da API NestJS no servidor, então segredos e URLs internas nunca chegam ao navegador, e os Client Components só a chamam quando realmente precisam.
Crie os dois projetos
Scaffold de uma API NestJS e de um site Next.js
Instala a ferramenta de linha de comando do Nest, cria a API e depois cria o site em uma pasta irmã.
GET /cats
No NestJS, o prefixo @Controller('cats') e o @Get() montam o caminho, e o controller é registrado em um módulo. No Next.js, o caminho da pasta é a URL e o nome da função exportada é o método.
POST /cats
O NestJS interpreta o corpo JSON para você com @Body() e responde a um POST com status 201 por padrão. Um Route Handler do Next.js lê o corpo com request.json() e define o status por conta própria.
Usando os dois
O NestJS passa para a porta 3001 e permite a origem do site. A página Next.js é um Server Component, então o fetch roda no servidor e API_URL continua privada.