Next.js explicado para negocios: qué es y qué aporta en velocidad y SEO

En los últimos dos años, muchas de las conversaciones que tenemos con clientes nuevos incluyen la misma pregunta: «nos han dicho que la web debería estar hecha en Next.js, ¿qué significa eso?». A veces lo ha recomendado un consultor de SEO, a veces aparece en un presupuesto de la competencia, a veces lo ha leído el socio más técnico de la empresa. La palabra suena a moderno, pero rara vez alguien explica qué cambia para el negocio.

Nuestra propia web está hecha con Next.js, y lo usamos en buena parte de los proyectos a medida que desarrollamos. Así que esta guía la escribo desde el uso diario, pensando en quien tiene que tomar la decisión y no en quien escribe el código. Qué es, qué aporta en velocidad y SEO, cómo se gestionan los contenidos, dónde se aloja y qué preguntas conviene hacer antes de elegirlo.

Si lo que buscas es la comparación directa con WordPress o las plantillas, la tienes en Next.js, WordPress o a medida. Aquí nos centramos en entender bien una de las opciones.

01Qué es Next.js, en una frase y en un párrafo

En una frase: Next.js es un framework, un conjunto de herramientas y reglas, para construir webs y aplicaciones con React.

En un párrafo: React es una librería creada por Meta para construir interfaces a base de componentes, piezas reutilizables como un botón, una tarjeta o un menú. React por sí solo resuelve cómo se pintan esas piezas, pero deja abiertas muchas decisiones: cómo se organizan las páginas, cómo se genera el HTML para los buscadores, cómo se optimizan imágenes y tipografías, cómo se conectan los datos. Next.js, creado por la empresa Vercel en 2016 y publicado como código abierto, toma esas decisiones con criterio y las empaqueta. El resultado es una base sobre la que construir webs rápidas sin reinventar cada pieza en cada proyecto.

Si quieres entender mejor cómo funciona eso de construir con componentes, lo contamos en la guía de React y componentes.

02Cómo genera Next.js las páginas (y por qué importa)

Aquí está el corazón de su utilidad para un negocio. Una web puede entregar sus páginas de varias maneras, y Next.js permite elegir la adecuada para cada una:

Lo valioso es la mezcla. En una misma web, la portada puede llegar al visitante como un archivo ya preparado, rapidísimo, mientras el buscador de viviendas consulta datos al momento y el formulario de reserva responde sin recargar. En arquitecturas más antiguas había que elegir una sola estrategia para toda la web.

Desde que Next.js adoptó los Server Components de React, además, muchos componentes se ejecutan solo en el servidor y no envían su código al navegador. Para el visitante eso significa menos JavaScript que descargar y procesar, que es justo lo que más ralentiza los móviles, como contamos en JavaScript y rendimiento. El detalle técnico de cada modo de renderizado (SSR, SSG, ISR y renderizado en cliente) da para una guía aparte; para decidir, basta con saber que cada página puede tener el suyo.

03Lo que aporta en velocidad

La velocidad no la regala ningún framework; se trabaja. Pero Next.js trae de serie varias herramientas que, bien usadas, ahorran mucho trabajo:

• →Imágenes optimizadas. Su componente de imagen genera versiones en varios tamaños y en formatos modernos como WebP o AVIF, carga en diferido las que están fuera de pantalla y reserva su espacio para que la página no dé saltos.
• →Tipografías sin parpadeos. Su sistema de fuentes descarga las tipografías en el propio dominio, evita peticiones a servidores externos y ajusta las métricas de la fuente de reserva para reducir el salto cuando carga la definitiva.
• →Código dividido por página. Cada página carga solo el código que necesita, automáticamente.
• →Precarga de enlaces. Cuando un enlace interno aparece en pantalla, Next.js puede ir preparando la página de destino, de modo que al pulsar la navegación se siente casi instantánea.
• →Caché bien pensada. Las páginas estáticas pueden servirse desde una CDN cerca de cada visitante.

Todo esto empuja en la dirección de los Core Web Vitals que mide Google: LCP de 2,5 segundos o menos, INP de 200 milisegundos o menos y CLS de 0,1 o menos. En nuestros proyectos con Next.js, alcanzar esos valores en verde forma parte del punto de partida, no de una optimización posterior.

04Lo que aporta en SEO

Para posicionar, un buscador necesita poder leer el contenido, entender de qué trata cada página y comprobar que la experiencia es buena. Next.js ayuda en los tres frentes:

1. 01HTML completo desde el primer momento. Las páginas llegan con su contenido ya escrito, sin esperar a que un script lo pinte. Google puede ejecutar JavaScript, pero lo hace en una segunda fase y con recursos limitados; otros buscadores y muchos rastreadores de IA lo hacen peor o no lo hacen. Entregar el HTML hecho elimina esa incertidumbre.
2. 02Metadatos ordenados. Título, descripción, etiquetas para redes sociales, canonical e idiomas alternativos se definen por página con una API propia, a partir de los mismos datos del contenido. Así es difícil que una página se publique sin su título o con el de otra.
3. 03Sitemap, robots e imágenes sociales generados. El sitemap y el archivo robots.txt pueden generarse automáticamente desde el contenido, y las imágenes para compartir en redes pueden crearse para cada página.
4. 04Datos estructurados. Es sencillo insertar el JSON-LD de schema.org en cada plantilla, para que una ficha de producto, una receta o un evento se describan de forma explícita.
5. 05Rutas limpias e idiomas. Las URL se definen por la estructura de carpetas, legibles y estables, y las webs multidioma pueden organizarse con rutas por idioma y sus anotaciones hreflang.

Nada de esto es exclusivo de Next.js, pero aquí viene integrado y se aplica igual a todas las páginas, lo que reduce mucho los descuidos.

05Cómo se gestionan los contenidos

Esta es la pregunta que más preocupa a los clientes, y con razón: una web que solo puede cambiar un programador se queda vieja enseguida.

Next.js no incluye un panel de administración como el de WordPress. Lo que se hace es conectarlo a un CMS headless, un gestor de contenidos que guarda textos, imágenes y fichas y los entrega a la web a través de una API. Tu equipo entra en un panel cómodo, escribe una noticia o cambia un precio, y la web se actualiza en segundos gracias a la revalidación. Hay opciones muy distintas según el caso: Sanity, Storyblok, Contentful, Payload o el propio WordPress usado solo como editor. Lo explicamos con calma en qué es un CMS headless.

Para webs con pocos cambios, otra opción es guardar el contenido en archivos de texto dentro del propio proyecto. Es lo que hacemos, por ejemplo, con esta biblioteca de guías: cada artículo es un archivo que se publica con el resto de la web. Es sencillo, muy rápido y fácil de versionar, aunque pide algo más de soltura técnica a quien edita.

06Dónde se aloja y qué cuesta mantenerla

Next.js necesita un entorno capaz de ejecutar Node.js para las partes dinámicas, o puede exportarse como web totalmente estática si no las tiene. Las opciones habituales son:

• →Vercel, la plataforma de sus creadores, con despliegue automático y CDN global. Muy cómoda; su coste crece con el tráfico y las funciones usadas.
• →Otras plataformas cloud como Netlify, Cloudflare o AWS, con adaptadores para Next.js.
• →Un servidor propio o un VPS con Node.js, gestionado por tu equipo o tu proveedor. Más control y coste más previsible, a cambio de algo más de administración.
• →Exportación estática a cualquier hosting sencillo o CDN, para webs sin partes dinámicas.

En cuanto al mantenimiento, Next.js publica versiones nuevas con regularidad y una versión mayor aproximadamente al año. Las actualizaciones de seguridad conviene aplicarlas pronto, y los saltos de versión se planifican. A cambio, desaparece buena parte del mantenimiento típico de otras plataformas: no hay decenas de plugins de terceros que actualizar ni una base de datos expuesta en cada visita, porque la mayoría de páginas se sirven ya generadas.

07Cuándo encaja y qué preguntar antes de elegirlo

Next.js encaja especialmente bien cuando la web es un activo importante del negocio: cuando la velocidad y el posicionamiento influyen en las ventas, cuando el diseño tiene que ser propio y no adaptado a una plantilla, cuando hay que conectar la web con otros sistemas (reservas, CRM, catálogo) o cuando se prevé que crezca hacia algo más parecido a una aplicación. Para una web muy sencilla, que se actualiza poco y con presupuesto ajustado, una opción más simple puede ser más sensata.

Si te lo proponen, estas preguntas ayudan a valorar la propuesta:

1. 01¿Cómo voy a editar los contenidos y qué CMS proponéis? ¿Puedo verlo antes?
2. 02¿Qué páginas serán estáticas y cuáles dinámicas, y por qué?
3. 03¿Dónde se alojará, cuánto costará al mes con mi tráfico previsto y qué pasa si crece?
4. 04¿Quién aplica las actualizaciones de seguridad y de versión, y con qué frecuencia?
5. 05¿El código queda a mi nombre, en un repositorio al que tengo acceso?
6. 06¿Qué valores de Core Web Vitals os comprometéis a entregar?

Un buen equipo responde a todas con naturalidad, porque son parte de cualquier proyecto bien planteado.

Sobre la dependencia de un proveedor

Una duda razonable es si elegir Next.js te ata a alguien. El código es abierto y puede alojarse en muchos sitios, así que la dependencia real no está en el framework, sino en quién conoce tu proyecto. Lo que da tranquilidad es que el código esté en un repositorio a nombre de tu empresa, documentado, con un proceso de publicación que otro equipo pueda entender. Con eso, cambiar de proveedor de hosting o de estudio es un trámite técnico, no un problema.

08Una herramienta al servicio del diseño

Lo que más valoramos de Next.js no está en ninguna lista de funciones: nos deja diseñar sin recortes. Cuando la base técnica resuelve con solvencia la velocidad, el SEO y la gestión de contenidos, el tiempo del proyecto se dedica a lo que hace única a una marca: la estructura pensada para sus clientes, la tipografía, el ritmo, los detalles de interacción.

En SIMA lo usamos en nuestros proyectos de desarrollo web y apps cuando el negocio lo pide, y lo recomendamos con la misma tranquilidad con la que decimos cuándo no hace falta. Si estás valorando una web nueva y quieres saber si Next.js encaja con tu caso, escríbenos y lo hablamos.