NestJS vs Next.js: tareas distintas, a menudo en el mismo proyecto
NestJS vs Next.js: ¿framework de backend o framework de React? | We.Inc
NestJS crea APIs de servidor en Node.js; Next.js crea sitios web en React con algo de código de servidor. Mira el mismo endpoint en ambos, cómo trabajan juntos y cuándo necesitas cada uno.
NestJS y Next.js no son rivales. NestJS es un framework para aplicaciones Node.js del lado del servidor: controladores, módulos e inyección de dependencias para APIs. Next.js es un framework de React para crear páginas web, con Route Handlers para trabajo ligero de backend. Las apps pequeñas pueden vivir enteras en Next.js; los sistemas más grandes suelen poner una API en NestJS detrás de un front end en Next.js.
Para qué sirve cada framework
Pregunta
NestJS
Tarea principal
Aplicaciones de servidor y APIs
Sitios web y apps web en React
¿Renderiza páginas?
No, devuelve datos
Sí, Server Components y Client Components
Lenguaje
Hecho con TypeScript, admite JavaScript
JavaScript o TypeScript
Capa HTTP
Express por defecto, Fastify opcional
Su propio servidor mediante next start
Estilo de endpoint
Clase @Controller con métodos @Get
route.ts que exporta GET, POST, etc.
Crear un proyecto
nest new project-name
npx create-next-app@latest
Puerto local por defecto
Abajo tienes un endpoint, una lista de gatos en GET /cats, escrito como controlador de NestJS y como Route Handler de Next.js. Cambia de ejemplo para ver una ruta POST y la configuración que permite a una página de Next.js consumir una API de NestJS.
Elige un ejemplo: una lista con GET, una creación con POST o la conexión entre las dos apps.
Lee el código de NestJS a la izquierda y el de Next.js a la derecha.
Usa la nota para ver qué te da cada framework sin esfuerzo.
Copia la versión que encaje con tu proyecto.
Los dos servidores de desarrollo usan el puerto 3000 por defecto. Si los ejecutas a la vez, arranca NestJS en otro puerto, como el 3001.
Si el navegador consume la API de NestJS directamente, activa CORS en NestJS para el origen de tu sitio. Si solo la consume el código de servidor de Next.js, CORS no interviene.
Guarda la dirección de la API en una variable de entorno solo de servidor cuando únicamente la consuman Server Components o Route Handlers.
Comparte los tipos de petición y respuesta mediante un pequeño paquete que importen las dos apps, para que un campo renombrado rompa la compilación y no producción.
Preguntas frecuentes
¿Puede Next.js sustituir a NestJS?
En una app pequeña, a menudo sí. Los Route Handlers cubren GET, POST, PUT, PATCH, DELETE, HEAD y OPTIONS con las APIs Web Request y Response. NestJS se gana su sitio cuando el backend crece: muchos módulos, tareas en segundo plano, varios clientes como apps móviles y un equipo que quiere una estructura impuesta.
¿NestJS puede renderizar páginas de React?
No está pensado para eso. NestJS devuelve datos, con los objetos serializados a JSON por defecto. Usa Next.js, u otro framework de front end, para las páginas.
¿Necesito TypeScript para NestJS?
NestJS está hecho con TypeScript y lo soporta por completo, y la documentación dice que aún puedes escribir JavaScript normal. Casi todos los ejemplos y guías usan TypeScript, así que cuenta con usarlo.
¿Deben estar los dos en un mismo repositorio?
Un monorepo con dos apps y un paquete de tipos compartido funciona bien para un solo equipo. Los repositorios separados encajan con equipos distintos que tienen sus propios calendarios de publicación.
¿Cuál debería aprender primero?
Si quieres publicar un sitio web, empieza por Next.js. Aprende NestJS cuando estés creando una API de la que dependen varios front ends o servicios.
Lo que NestJS aporta a un backend
NestJS se define como un framework para crear aplicaciones Node.js del lado del servidor eficientes y escalables. Organiza el código en módulos, controladores y providers y los conecta con inyección de dependencias, lo que mantiene coherente una API grande entre muchos desarrolladores.
Por debajo funciona con Express por defecto. Cambiar al adaptador @nestjs/platform-fastify modifica la capa HTTP sin reescribir tus controladores, aunque el middleware específico de Express necesitará entonces un equivalente para Fastify.
Lo que Next.js aporta a un sitio web
Next.js renderiza React en el servidor, enruta según los nombres de carpetas y archivos, y envía al navegador solo las partes interactivas. Sus Route Handlers bastan para envíos de formularios, webhooks y pequeños endpoints JSON que pertenecen al mismo sitio.
Lo que no pretende ser es un backend estructurado para otros clientes. No hay sistema de módulos ni inyección de dependencias, así que una API grande construida solo con archivos de ruta tiende a desordenarse.
Cómo encajan juntos
El reparto habitual es Next.js para todas las páginas y NestJS para la lógica de negocio y los datos. Los Server Components de Next.js piden datos a la API de NestJS en el servidor, así que los secretos y las URL internas nunca llegan al navegador, y los Client Components solo la consumen cuando no queda otra.
Crea los dos proyectos
Crea una API en NestJS y un sitio en Next.js
Instala la herramienta de línea de comandos de Nest, crea la API y después crea el sitio en una carpeta hermana.
GET /cats
En NestJS el prefijo @Controller('cats') y @Get() forman la ruta, y el controlador se registra en un módulo. En Next.js la ruta de la carpeta es la URL y el nombre de la función exportada es el método.
POST /cats
NestJS analiza el cuerpo JSON por ti con @Body() y responde a un POST con el estado 201 por defecto. Un Route Handler de Next.js lee el cuerpo con request.json() y fija el estado por su cuenta.
Usar los dos
NestJS pasa al puerto 3001 y permite el origen del sitio. La página de Next.js es un Server Component, así que el fetch se ejecuta en el servidor y API_URL sigue siendo privada.