¿Qué es Next.js? Diferencias con React

01¿Qué es Next.js?

La pregunta qué es Next.js se responde mejor junto con React. React es una biblioteca que permite construir la interfaz de usuario con componentes, pero no incluye todo lo necesario para una web completa. Next.js es un framework, desarrollado por Vercel, que completa esas piezas que faltan.

Decisiones como dónde y cuándo se generan las páginas, cómo se organizan las direcciones o cómo se reducen las imágenes vienen ya planteadas en Next.js. El desarrollador, en lugar de montar esta infraestructura desde cero, se centra directamente en el producto.

Si aún no conoce los conceptos básicos de React, eche primero un vistazo a nuestro artículo qué es React; las páginas que escriba en Next.js son, al fin y al cabo, componentes de React.

02Diferencia entre Next.js y React

En pocas palabras: React es una biblioteca y Next.js es un framework construido sobre React. No son rivales; todo proyecto que usa Next.js usa también React. La diferencia está en quién se encarga del resto del proyecto.

La tabla siguiente resume las diferencias típicas entre una aplicación de una sola página construida solo con React y un proyecto Next.js:

03¿Qué es el renderizado en servidor?

El renderizado en servidor (SSR) consiste en que el HTML de la página se genera en el servidor, no en el navegador del usuario, y se envía ya listo. El visitante ve el contenido desde el primer momento; a medida que se carga el JavaScript, la página se vuelve interactiva.

Lo contrario es el renderizado en el cliente: el servidor envía una página casi vacía y un archivo JavaScript grande, y el contenido se crea en el navegador. En un ordenador potente la diferencia puede no notarse; pero en un teléfono modesto y con una conexión móvil lenta, la aparición del primer contenido se retrasa de forma notable.

Next.js no ofrece solo SSR; permite elegir un método de generación distinto para cada página. El método adecuado depende de la frecuencia con la que cambia el contenido.

Generación estática (SSG)

La página se genera una vez al compilar el proyecto y se sirve como archivo. Para el contenido que cambia poco, como las páginas «Sobre nosotros», de servicios y de blog, es el método más rápido y más económico.

Regeneración incremental (ISR)

La página estática se vuelve a generar en segundo plano a los intervalos que usted fije o cuando se activa. Es una solución equilibrada para cambios frecuentes pero no instantáneos, como un catálogo de productos.

Renderizado bajo petición y en el cliente

Los datos personalizados o que cambian en todo momento (página de cuenta, stock en vivo) se generan en el servidor en el momento de la petición. Solo las pequeñas partes que requieren interacción se ejecutan en el navegador.

04Por qué Next.js es ventajoso para el SEO

Al leer una página, los buscadores prefieren el HTML ya preparado. En una aplicación React cuyo contenido se crea solo en el navegador, el robot ve primero un esqueleto vacío; el contenido aparece únicamente después de ejecutar el JavaScript. En Next.js, en cambio, los títulos, los textos y los enlaces llegan ya listos desde el servidor.

Next.js ofrece además una estructura de metadata que facilita gestionar el título, la descripción y las etiquetas para compartir en redes de cada página. Los elementos del SEO técnico, como los datos estructurados, el mapa del sitio y la dirección canónica, también pueden mantenerse ordenados dentro del código.

Aun así, el framework por sí solo no da posicionamiento. Lo que decide es la arquitectura de la información, la calidad del contenido y los enlaces internos; el diseño web SEO planifica estos elementos junto con la infraestructura técnica. Tras la publicación hace falta un trabajo de SEO y analítica para medir y mejorar.

05Rendimiento y Core Web Vitals

Next.js facilita crear páginas rápidas con herramientas como la división automática del código, el componente de imagen, la optimización de fuentes y el almacenamiento en caché. Cada página carga solo el JavaScript que necesita.

Los umbrales de Core Web Vitals que mide Google se definen como LCP ≤ 2,5 s, INP ≤ 200 ms y CLS ≤ 0,1. Next.js facilita alcanzar estos objetivos, pero no los garantiza; las imágenes grandes, los scripts de terceros y el código de cliente innecesario pueden bajar las puntuaciones.

Por eso es imprescindible medir antes y después de la publicación. En el trabajo de velocidad y rendimiento se siguen los datos de campo y se eliminan uno a uno los cuellos de botella.

06Para qué proyectos es adecuado Next.js

Next.js brilla en proyectos donde importan a la vez el contenido y la interacción. Es una opción sólida si quiere recibir tráfico de los buscadores y ofrecer al mismo tiempo una experiencia de usuario rica.

• Catálogos con muchas páginas de productos o de anuncios
• Blogs y sitios de contenido, sobre todo junto con un sistema de gestión de contenidos headless
• Páginas de campañas y de presentación de productos
• Sitios con acceso de miembros y panel personal
• Productos que son a la vez página de marketing y pantalla de aplicación

¿Cuándo no hace falta?

Para una web de presentación de unas pocas páginas o una única página de campaña, Next.js puede ser excesivo. Un diseño de landing pages rápido, hecho con HTML y CSS sencillos, suele requerir menos mantenimiento. Si quiere separar el equipo de contenido del de desarrollo, nuestro artículo qué es un headless CMS explica la arquitectura moderna construida con Next.js.

07Errores frecuentes en proyectos Next.js

Next.js simplifica muchas decisiones, pero hay algunas trampas habituales en los equipos nuevos. Conocerlas desde el principio evita correcciones caras más adelante.

• Convertir todos los componentes en componentes de cliente: las partes que no requieren interacción deben quedarse en el servidor; de lo contrario, se envía JavaScript innecesario al navegador.
• Obtener datos sin entender la caché: si no se define cuánto tiempo permanece el dato en caché, el usuario puede ver un precio o un stock antiguos.
• Cargar imágenes sin optimizarlas: si no se usa el componente de imagen incluido, los archivos grandes alargan el tiempo de LCP.
• Filtrar claves secretas al cliente: las claves de API que solo deben usarse en el servidor no deben entrar en el código que va al navegador.
• Aplazar la actualización de versión: el framework evoluciona rápido; en un proyecto que lleva mucho tiempo sin actualizarse, la migración puede convertirse de golpe en un trabajo enorme.

08Primeros pasos con Next.js

Antes de empezar hay que conocer los fundamentos de JavaScript y la lógica de componentes de React; para el lenguaje, el artículo qué es JavaScript es un buen punto de partida. En su equipo debe estar instalada la versión LTS actual de Node.js.

La herramienta oficial de instalación prepara un proyecto nuevo con unas pocas preguntas: pregunta por opciones como TypeScript, la herramienta de estilos y la estructura de carpetas. Para las instrucciones actualizadas, siga la documentación de nextjs.org.

• El servidor de desarrollo se abre por defecto en la dirección http://localhost:3000.
• Cada subcarpeta de la carpeta app corresponde a una dirección; el archivo page es el contenido de esa dirección.
• Antes de publicar, se genera la compilación de producción con npm run build y se revisan los errores.

npx create-next-app@latest ilk-next-projem
cd ilk-next-projem
npm run dev