Next.js

¿Qué es Next.js?

Next.js es un framework de código abierto basado en React, creado por Vercel, para desarrollar webs y aplicaciones web. Añade a React lo que un proyecto real necesita: enrutamiento, renderizado en el servidor, generación de páginas estáticas, optimización de imágenes y herramientas de SEO, sin tener que configurarlo todo desde cero.

¿Para qué sirve Next.js?

• Webs corporativas y de contenidos rápidas y bien posicionadas, normalmente conectadas a un headless CMS como Strapi o Drupal.
• Aplicaciones web con zonas privadas, formularios y lógica de negocio.
• Ecommerce y landing pages donde la velocidad de carga influye directamente en la conversión.

Cómo funciona: tipos de renderizado

Una de las claves de Next.js es que permite elegir, página a página, cómo se genera el HTML:

• SSR (Server Side Rendering): la página se genera en el servidor en cada petición. Ideal para contenido que cambia constantemente.
• SSG (Static Site Generation): la página se genera una vez, al compilar, y se sirve como HTML estático. Es la opción más rápida.
• ISR (Incremental Static Regeneration): páginas estáticas que se regeneran cada cierto tiempo o bajo demanda, sin recompilar todo el sitio.
• CSR (Client Side Rendering): el contenido se carga en el navegador, útil para partes muy interactivas.

Con el App Router, Next.js incorpora además React Server Components y Server Actions, que permiten ejecutar lógica de servidor directamente desde los componentes. Lo explicamos en nuestra introducción a las Server Actions de Next.js.

Ventajas de Next.js

• Rendimiento: división automática del código, precarga de páginas y optimización de imágenes y fuentes.
• SEO: al generar el HTML en el servidor o de forma estática, los buscadores reciben el contenido completo, con metadatos gestionados desde el propio framework.
• Enrutamiento basado en archivos: cada carpeta es una ruta, lo que simplifica la organización del proyecto.
• Full-stack: permite crear endpoints de API y lógica de servidor en el mismo proyecto.
• Ecosistema React: acceso a todas las librerías y componentes de React, y una comunidad muy amplia.
• Integración con cualquier backend: APIs REST, GraphQL, headless CMS o bases de datos.

Next.js vs React

React es una librería para construir interfaces; Next.js es un framework construido sobre React que añade el renderizado en servidor, el enrutamiento y las optimizaciones necesarias para llevar una web a producción. Si usas Next.js, estás usando React.

Cómo usamos Next.js en Digrup

Next.js es nuestra tecnología de referencia para frontends. Nuestra propia web está desarrollada con Next.js y conectada a Strapi como headless CMS, y es la arquitectura que proponemos cuando un proyecto necesita un frontend a medida, rápido y preparado para SEO. También lo combinamos con Drupal cuando el proyecto pide un backend más robusto.

Si estás pensando en desarrollar tu web o aplicación con Next.js, hablemos.

Preguntas frecuentes

¿Next.js es frontend o backend?

Principalmente frontend, pero es un framework full-stack: también permite crear APIs y ejecutar lógica en el servidor dentro del mismo proyecto.

¿Next.js es bueno para el SEO?

Sí. Como puede generar el HTML en el servidor o de forma estática, los buscadores indexan el contenido sin depender de JavaScript, y el framework facilita la gestión de metadatos, sitemaps y datos estructurados.

¿Qué diferencia hay entre Next.js y React?

React es la librería de interfaces; Next.js es el framework que se construye encima y añade enrutamiento, renderizado en servidor y optimizaciones.

¿Next.js es gratis?

Sí, Next.js es de código abierto (licencia MIT). Se puede desplegar en Vercel o en cualquier servidor que ejecute Node.js.