Next.js vs Node.js: cómo se relacionan

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

Node.js ejecuta JavaScript fuera del navegador; Next.js es un framework de React que funciona sobre él. Mira la pila capa por capa, un mismo endpoint en ambos y cuándo usar cada uno.

Node.js es un runtime: el programa que ejecuta JavaScript en un servidor o en tu portátil. Next.js es un framework de React para crear sitios web, y sus herramientas de compilación y su servidor funcionan sobre Node.js. Así que rara vez hay que elegir uno u otro. Toda aplicación Next.js necesita Node.js por debajo, mientras que una aplicación Node.js no tiene por qué incluir Next.js.

Runtime frente a framework

Pregunta

Qué es
Runtime de JavaScript
Framework de React

Lo instalas como
Un programa en la máquina
Un paquete npm en un proyecto

¿Crea páginas web?
Solo si escribes ese código
Sí, con enrutado y renderizado integrados

¿Gestiona HTTP?
Con node:http o una librería como Express
Páginas más Route Handlers

¿Depende del otro?
No
Sí, como mínimo Node.js 20.9

Arranque en producción
next build y luego next start

La forma más rápida de ver la relación es fijarse en las capas por las que pasa una petición. Haz clic abajo en cada capa de una aplicación Next.js típica para ver qué hace y quién es responsable de ella.

Haz clic en una capa, desde el navegador arriba hasta el sistema operativo abajo.
Lee qué hace esa capa en una aplicación Next.js.
Compara más abajo los ejemplos del servidor Node.js simple y del Route Handler de Next.js.
Usa las filas de decisión de la tabla para elegir lo que necesita tu proyecto.

Comprueba node --version antes de instalar Next.js. La documentación actual indica Node.js 20.9 como mínimo.
Usa una versión de soporte a largo plazo de Node.js en los servidores y fija la misma versión principal en local y en producción.
Si tu proyecto solo sirve una API sin páginas web, un servidor Node.js simple o un framework de backend encaja mejor y pesa menos que Next.js.
Una exportación estática de un sitio Next.js solo necesita Node.js al compilar. El resultado son archivos simples que cualquier servidor web puede alojar, a cambio de perder las funciones que solo existen en el servidor.

Preguntas frecuentes

¿Next.js es backend o frontend?

Ambas cosas, con límites. Renderiza páginas de React en el servidor, envía las partes interactivas al navegador y te permite escribir Route Handlers para endpoints JSON. No está pensado para ser un backend completo para muchos otros clientes.

¿Tengo que aprender Node.js antes que Next.js?

Necesitas tener Node.js instalado y manejarte con npm y la terminal. No hace falta conocer a fondo el módulo node:http, porque Next.js se encarga del servidor por ti.

¿Next.js sigue teniendo un Edge Runtime?

La opción de ruta runtime ahora indica 'nodejs' como valor por defecto y 'edge' como obsoleto. La documentación pide quitar el export runtime de los archivos de ruta, así que el código nuevo debe dar por hecho Node.js.

¿Puedo ejecutar Next.js con Bun o Deno?

La documentación de despliegue de Next.js incluye Bun como adaptador verificado y Deno Deploy entre otras plataformas con su propia integración. Las funciones compatibles varían fuera del servidor Node.js, así que revisa las notas de la plataforma.

¿Express es el mismo tipo de cosa que Next.js?

Se parece más que Node.js, ya que ambos son librerías sobre Node.js. Express es un kit mínimo para servidores HTTP; Next.js es un framework completo para sitios web construido en torno a React.

Node.js en un párrafo

El sitio de Node.js lo define como un runtime de JavaScript asíncrono y orientado a eventos, diseñado para crear aplicaciones de red escalables. En la práctica, permite que JavaScript lea archivos, abra puertos de red y hable con bases de datos, algo que un navegador no permite.

Lo que Next.js añade encima

Next.js convierte una carpeta de componentes React en un sitio: rutas basadas en archivos, renderizado en el servidor, obtención de datos, gestión de imágenes y fuentes, y un servidor de producción. Cuando ejecutas next start, ese servidor es un proceso de Node.js, y la documentación dice que este despliegue admite todas las funciones de Next.js.
Durante el desarrollo pasa lo mismo con next dev, y next build se ejecuta sobre Node.js para compilar y prerrenderizar las páginas.

Cómo elegir para un proyecto

¿Estás creando un sitio o una aplicación web con React? Usa Next.js y acepta Node.js como parte de la configuración. ¿Estás creando una herramienta de línea de comandos, un worker que procesa una cola o una API pura? Escríbelo directamente para Node.js o con un framework de backend, y olvídate de Next.js.

Servidor Node.js simple

Usa solo el módulo integrado node:http. Tú decides el puerto, las cabeceras y el enrutado. Ejecútalo con node server.mjs.

Route Handler de Next.js

La ruta del archivo se convierte en /api/hello y Next.js ejecuta el servidor. Las rutas desconocidas reciben automáticamente la página 404 del framework.

Dónde se ejecuta Node.js en un proyecto Next.js

Scripts de package.json

Cada script arranca un proceso de Node.js: el servidor de desarrollo, la compilación de producción y el servidor de producción.

Navegador

El visitante

Recibe el HTML que Next.js renderizó en el servidor y luego carga JavaScript solo para los Client Components, para que funcionen los botones y formularios.

El código de tu aplicación

Tú

Páginas, layouts y Route Handlers en la carpeta app. Es React más unas cuantas convenciones de Next.js, escrito en JavaScript o TypeScript.

El framework

Asigna carpetas a URL, renderiza los Server Components, empaqueta el código de cliente y ejecuta el servidor de producción que arranca next start.

El runtime

Ejecuta todo el JavaScript de arriba en el servidor: la compilación, el servidor de desarrollo y cada petición en producción.

Sistema operativo

Tu hosting

macOS, Windows, Linux o un contenedor. Next.js indica macOS, Windows incluido WSL, y Linux como sistemas compatibles para desarrollo.