Next.js vs React: qué añade Next y cuándo lo necesitas
Next.js vs React
Next.js vs React: librería vs framework, cuándo basta Vite | We.Inc
React es una librería de UI; Next.js es un framework construido sobre ella. Marca las funciones que necesita tu proyecto y mira si encaja Next.js o React con Vite, con código para ambos.
React es una librería para construir interfaces de usuario a partir de componentes. Next.js es un framework que usa React y añade enrutado basado en archivos, renderizado en el servidor, server components, endpoints de API y herramientas de build. En ambos casos escribes React. Elige Next.js cuando las páginas necesiten HTML renderizado en el servidor, secretos o rutas de backend; React con Vite encaja con apps que viven detrás de un inicio de sesión.
Qué obtienes de serie
Necesidad
React con Vite
Next.js (App Router)
Componentes, estado, hooks
Sí
Sí, el mismo React
Enrutado
Añade una librería de enrutado
Las carpetas de app/ se convierten en rutas
HTML renderizado antes de que cargue JavaScript
No, salvo que añadas SSR o prerenderizado
Sí, en el servidor o al compilar
Server components y secretos en el servidor
No
Sí, los layouts y las páginas son server components por defecto
Endpoints de API en el mismo proyecto
No, backend aparte
Archivos route.ts
Resultado
Archivos estáticos de vite build
Servidor Node, o archivos estáticos con output: 'export'
Marca las funciones que necesita tu proyecto. Cada una aparece como integrada en Next.js o fácil en una app React con Vite, y el recuento te da una recomendación inicial. El código de abajo muestra la misma página pequeña escrita de las dos formas.
Marca cada función que tu proyecto necesita ahora, no algún día.
Mira hacia qué lado se inclina cada función y por qué.
Lee el recuento y la recomendación bajo la lista.
Compara los dos ejemplos de código para ver cuánto cambia.
Tu conocimiento de React se transfiere por completo. Los componentes, los hooks y JSX son idénticos; lo que cambia es dónde viven los archivos y dónde se ejecuta el código.
En Next.js, añade 'use client' solo a los archivos que necesitan estado, efectos o APIs del navegador. Marcar todo un layout como cliente envía mucho más JavaScript.
Una app de Vite son archivos estáticos, así que puede alojarse en cualquier hosting estático. Una app de Next.js que usa funciones de servidor necesita un hosting que ejecute Node o el adaptador de plataforma que elijas.
Si el tráfico de búsqueda importa, comprueba qué envía tu página antes de que se ejecute JavaScript. Mira el código fuente de una single page app de Vite y verás sobre todo un div raíz vacío.
Preguntas frecuentes
¿Es Next.js mejor que React?
No son alternativas en el sentido habitual, porque Next.js ejecuta React. La pregunta real es si quieres el enrutado, el renderizado en el servidor y las convenciones de un framework, o una configuración más ligera en la que eliges tú cada pieza.
¿El equipo de React sigue recomendando Create React App?
La guía actual de react.dev recomienda empezar con un framework como Next.js o React Router, y menciona Vite, Parcel y Rsbuild para montar tu propia configuración desde cero. No menciona Create React App.
¿Puede Next.js generar un sitio estático como Vite?
Sí. Pon output: 'export' en next.config.js y next build escribe HTML, CSS y JavaScript en una carpeta out. Las funciones que necesitan un servidor en marcha, como cookies, rewrites, redirects y server actions, no están disponibles en ese modo.
¿Debo aprender React antes que Next.js?
Aprende primero lo básico de React: componentes, props, estado y efectos. Luego Next.js añade enrutado y conceptos de servidor por encima, y depurar es mucho más fácil cuando sabes a qué capa pertenece cada problema.
¿Es mala una app React con Vite para el SEO?
No automáticamente, pero por defecto el HTML no tiene contenido de la página hasta que se ejecuta JavaScript. Las páginas de marketing que necesitan posicionar son más fáciles con renderizado en el servidor o prerenderizado; los paneles detrás de un inicio de sesión no lo necesitan.
Librería frente a framework
React decide cómo un componente convierte el estado en UI y actualiza la página. No decide cómo se asignan las URLs a pantallas, dónde se cargan los datos ni cómo se compila el proyecto. Esas decisiones son tuyas en una app de Vite y de Next.js en una app de Next.
Ese es el intercambio: Next.js elimina decisiones y añade funciones de servidor, y a cambio sigues sus convenciones de carpetas y usas su build.
Qué cambia en tu código
En Next.js, app/blog/page.tsx es la ruta /blog y layout.tsx envuelve a sus hijos. Las páginas son server components salvo que se marquen de otra forma, así que pueden hacer await de datos directamente, y las piezas interactivas viven en archivos que empiezan con 'use client'.
En una app de Vite, main.tsx renderiza un componente raíz en index.html, las rutas vienen de una librería como React Router y los datos se cargan en el navegador con fetch o una caché de cliente.
Cuándo basta con React y Vite
Las herramientas internas, los paneles, los editores y cualquier cosa detrás de un inicio de sesión rara vez necesitan HTML renderizado en el servidor. Una app de Vite arranca rápido, se despliega como archivos estáticos y mantiene pequeño el modelo mental.
Si esa app necesita más adelante páginas públicas, es habitual poner las páginas de marketing en un sitio aparte y dejar la app tal como está.
La misma página, de las dos formas
Next.js: una ruta que carga datos en el servidor
La ruta del archivo es la URL. La página espera los datos antes de enviar el HTML; solo el botón se envía como JavaScript de cliente.
React con Vite: la misma lista cargada en el navegador
El enrutado viene de React Router y la lista aparece después de que el navegador la descarga.
Iniciar cualquiera de los dos proyectos
Ambos comandos hacen unas cuantas preguntas, entre ellas si usar TypeScript.
Páginas públicas que deben posicionar en buscadores
El HTML del servidor o del build pone el contenido en la primera respuesta.
Consultas a base de datos o claves de API usadas al renderizar
Los server components mantienen las credenciales fuera del bundle del navegador.
Endpoints de backend en el mismo proyecto
Los archivos route.ts se convierten en endpoints de API.
Muchas páginas de contenido con layouts compartidos
El enrutado por carpetas y los layouts anidados vienen integrados.
Todo está detrás de un inicio de sesión
Los rastreadores nunca lo ven, así que renderizar en el navegador está bien.
El hosting debe ser de archivos estáticos simples
vite build genera recursos estáticos; Next.js también puede, pero pierde las funciones de servidor.
Un widget o una herramienta incrustada en otro sitio
Un solo bundle y un solo elemento raíz son más fáciles de insertar.
Aprender React en sí
Menos conceptos a la vez: no hay división entre servidor y cliente en la que pensar.
¿Cuál encaja con tu proyecto?
Necesidades del proyecto
React con Vite
Next.js: {n}. React con Vite: {v}.
Marca al menos una necesidad para obtener una recomendación.
Inclínate por Next.js. Tus necesidades dependen del renderizado en el servidor o de código de servidor.
React con Vite cubre esto. Puedes añadir un framework más adelante si aparecen páginas públicas.
Está reñido. Elige Next.js si alguna página pública debe posicionar; si no, empieza con Vite.