Qué es Next.js y por qué las empresas lo eligen en lugar de WordPress

Next.js aparece hoy en casi todas las conversaciones sobre un nuevo sitio web corporativo. La agencia lo propone en lugar de WordPress, el desarrollador habla de “renderizado del lado del servidor” y en las ofertas de hosting de repente tienes que buscar “soporte para Node.js”. En esta guía explicamos de forma sencilla qué es Next.js, cómo funciona, para qué sirve y para qué no, y qué necesita del servidor. Sin jerga cuando se pueda evitar.

Si estás ante una elección concreta entre dos tecnologías, tenemos una comparación aparte: WordPress o Next.js para una página corporativa. Aquí nos centramos solo en Next.js.

Tabla de contenidos

1. ¿Qué es Next.js en una frase?
2. ¿En qué se diferencia Next.js de React por sí solo?
3. ¿Cómo muestra Next.js las páginas? Cuatro modos de renderizado
4. ¿Qué más incluye Next.js?
5. ¿Por qué las empresas eligen Next.js en lugar de WordPress?
6. ¿Cuándo Next.js no es una buena idea?
7. ¿Qué hosting necesita Next.js?
8. ¿Vercel o un servidor propio?
9. ¿Cómo lanzar Next.js en Saplo paso a paso?
10. Preguntas frecuentes

¿Qué es Next.js en una frase?

Next.js es un framework gratuito para construir sitios y aplicaciones web, basado en la biblioteca React, que puede generar el HTML listo en el servidor antes de que la página llegue al navegador.

Está desarrollado por la empresa Vercel, el código es abierto (licencia MIT), y la primera versión se lanzó en 2016. Hoy es una de las formas más populares de escribir páginas en JavaScript. En Saplo lo instalamos en la versión 16.

Un framework es un conjunto de soluciones y reglas listas en las que el programador inserta su propio código. No hace falta reinventar cada vez el enrutamiento, la carga de datos, la optimización de imágenes o la construcción de archivos para producción. Next.js lo ofrece todo en un paquete.

Importante para personas no técnicas: Next.js no es un sistema de gestión de contenido como WordPress. No tiene un panel donde puedas hacer clic en “Agregar entrada”. Es una herramienta para desarrolladores. Los contenidos se entregan desde archivos, bases de datos o un sistema CMS separado (más abajo hablamos de eso).

¿En qué se diferencia Next.js de React puro?

React es una biblioteca para construir interfaces: botones, formularios, listas, vistas completas. Sin embargo, por sí solo no responde a preguntas que surgen al crear una página web real:

• cómo organizar subpáginas y URLs,
• de dónde y cuándo obtener los datos,
• cómo lograr que Google vea el contenido y no una pantalla en blanco,
• cómo construir y lanzar una versión de producción.

Una aplicación React clásica (llamada SPA) envía al navegador un archivo HTML casi vacío y un paquete de JavaScript. Es el navegador quien luego construye la página. Para el usuario esto significa ver una pantalla blanca por una fracción de segundo o más en un teléfono lento. Para el buscador es un trabajo extra porque el contenido solo aparece tras ejecutar los scripts.

Next.js toma React y le añade una capa del lado del servidor. La página llega al navegador ya con contenido, y los elementos interactivos "cobran vida" un momento después. De ahí su popularidad en proyectos donde SEO y la rapidez en la primera visualización son claves.

¿Cómo muestra Next.js las páginas? Cuatro modos de renderizado

Esta es la cosa más importante para entender, porque también determina la elección del hosting. Next.js permite que cada subpágina elija un modo de generación diferente.

Modo	Cuándo se genera el HTML	Ideal para
Página estática (SSG)	una vez, durante la construcción del proyecto	página principal, "Sobre nosotros", oferta, entradas del blog
Renderizado en el servidor (SSR)	en cada acceso del usuario	carrito, panel de cliente, resultados de búsqueda
Actualización incremental (ISR)	una vez, y luego en intervalos establecidos en segundo plano	catálogo de productos, tarifas, novedades
Renderizado en el navegador (CSR)	sólo en el usuario	gráficos, editores, secciones tras iniciar sesión

En la práctica, una página comercial mezcla estos modos. La descripción de la empresa es estática y se carga al instante. La lista de productos se actualiza cada pocos minutos. El panel del cliente se renderiza bajo demanda, porque cada usuario ve algo distinto.

Desde la versión 13, Next.js también tiene lo que llaman App Router y Server Components: componentes que se ejecutan exclusivamente en el servidor y no envían su código al navegador. Menos JavaScript para el usuario significa una página más rápida, especialmente en móviles.

¿Qué más incluye Next.js?

Además del renderizado, el framework resuelve varios problemas comunes que en React puro tendrías que implementar por tu cuenta:

• Routing basado en archivos. La carpeta app/oferta/page.js se convierte automáticamente en la ruta /oferta. Sin necesidad de configuración.
• Optimización de imágenes. El componente next/image reduce automáticamente el tamaño de las fotos, sirve formatos modernos y solo las carga cuando aparecen en pantalla.
• API propia. En el mismo proyecto puedes crear endpoints, por ejemplo para formularios de contacto o para webhooks de pagos. No necesitas un backend separado.
• Metadatos SEO. Puedes definir títulos, descripciones, etiquetas Open Graph y el mapa del sitio directamente en el código, para cada página.
• Fuentes y scripts. Los mecanismos integrados cargan las fuentes sin causar “saltos” en el texto y retrasan la carga de scripts externos.
• Construcción rápida. En la versión 16, la herramienta de construcción por defecto es Turbopack, notablemente más rápida que el antiguo Webpack.

¿Por qué las empresas eligen Next.js en lugar de WordPress?

Hay cuatro razones principales.

1. Velocidad sin necesidad de añadir plugins. WordPress ejecuta PHP y consulta la base de datos en cada visita, a menos que alguien configure la caché. Una página estática en Next.js es un archivo listo para usar. Obtener buenos resultados en PageSpeed y Core Web Vitals es más sencillo. Explicamos las causas de la lentitud de WordPress en el artículo ¿WordPress va lento? 9 causas.

2. Menor superficie de ataque. No existe un panel /wp-admin que los bots intenten atacar todos los días ni decenas de plugins de diferentes autores. Una página estática prácticamente no tiene puntos vulnerables para un hackeo.

3. Libertad de diseño. La página no está limitada por un tema o un page builder. Para marcas que buscan un diseño fuera de lo común, animaciones o integraciones con sus propios sistemas, esto marca una gran diferencia.

4. Página y aplicación en uno. Si, además de una página informativa, necesitas un configurador, calculadora, panel de cliente o tienda con lógica propia, Next.js puede gestionarlo todo en un solo proyecto.

También está ganando popularidad el modelo headless: el contenido se introduce en un panel cómodo (por ejemplo, Directus, Strapi, y hasta WordPress usado solo como backend), y Next.js se encarga de mostrarlo. El equipo editorial usa su propio panel y los visitantes disfrutan de una página rápida. En Saplo, Directus y Next.js se pueden tener juntos en un mismo Box.

¿Cuándo Next.js no es buena idea?

Siendo honestos: no siempre vale la pena. Next.js falla cuando:

• la persona que edita el contenido no es técnica y el presupuesto no incluye un CMS. Sin panel, cualquier cambio de texto es tarea para un programador,
• necesitas una función típica “para ya”. Reservas, formularios, tiendas con pagos y envíos españoles existen en WordPress como plugins listos. En Next.js suele ser trabajo del programador,
• no tienes a quién pedir cambios. Muchas personas pueden manejar WordPress, pero muy pocas el código React,
• la página es una tarjeta de presentación sencilla sin ambiciones. En ese caso, la diferencia en velocidad no compensa el mayor costo de desarrollo.

Una tienda online simple todavía es más rápido poner en marcha con un motor ya hecho. Lo explicamos en el texto Qué es WooCommerce.

¿Qué tipo de hosting necesita Next.js?

Aquí muchas personas se sorprenden. Next.js es una aplicación Node.js, no un conjunto de archivos PHP. De esto se derivan dos escenarios:

Versión completamente estática (configuración output: 'export'). Next.js genera archivos listos de HTML, CSS y JS. Basta con cualquier servidor de archivos, incluso un hosting común. Sin embargo, pierdes SSR, ISR, API propia y la optimización de imágenes en el servidor.

Versión completa. Se necesita un proceso Node.js en segundo plano que responda a las consultas. Además, un servidor web delante (por ejemplo, nginx), un certificado SSL y algo que reinicie el proceso tras un fallo o reinicio del equipo. El hosting compartido clásico para PHP generalmente no permite esto.

Los requisitos mínimos son modestos. En nuestra configuración para Next.js consideramos 512 MB de RAM y 2 GB de disco para cada aplicación. Se necesita más memoria al construir (npm run build) proyectos grandes, ya que entonces el consumo es máximo.

Vercel o tu propio servidor?

Vercel, creador de Next.js, ofrece su propia plataforma de hosting y es allí donde el framework funciona de manera "más nativa". Sin embargo, es importante conocer dos cosas:

• el plan gratuito Hobby está destinado para uso no comercial. La página de una empresa debería estar en un plan de pago, facturado por cada miembro del equipo,
• con mayor tráfico se aplican cargos por transferencia, llamadas a funciones y optimización de imágenes, por lo que la factura crece junto con la popularidad del sitio.

Un servidor propio o contenedor ofrece un costo fijo y predecible y control total sobre los datos (servidores en la UE). A cambio, alguien debe encargarse de Node.js, nginx, SSL y los reinicios automáticos. Dejamos el cálculo detallado de costes para otro artículo, pero la regla es simple: cuanto mayor sea el tráfico y el equipo, más rentable es una tarifa fija.

¿Cómo lanzar Next.js en Saplo paso a paso?

En Saplo, Next.js es una aplicación lista en el catálogo. No necesitas configurar el servidor: el proceso Node.js está supervisado (se reinicia solo tras una caída), nginx dirige el tráfico hacia él y el certificado SSL se emite automáticamente.

Paso 1. Elige un plan. Una página en Next.js cabe perfectamente en Box S (1 GB RAM, 15 GB SSD, 27 € por año). Si quieres trabajar por SSH o construir proyectos más grandes, elige Box M (2 GB RAM, 30 GB SSD, 63 € por año), que incluye acceso SSH. El precio del primer año es igual al de la renovación. Las aplicaciones y dominios son ilimitados en todos los planes. Compara los planes en el precio.

Paso 2. Añade la aplicación. En el panel selecciona del catálogo Next.js. Si no tienes código aún, Saplo crea un proyecto inicial (create-next-app), lo compila y lo lanza para que veas la página funcionando inmediatamente.

Paso 3. Conecta la dirección. Al inicio recibes un subdominio *.saploapp.pl con SSL. Agrega tu propio dominio en el panel y configura los registros DNS según las indicaciones.

Paso 4. Sube tu código por Git. Genera el archivo de configuración con el comando saplo init, añádelo al repositorio y conecta el repositorio de GitHub en el detalle de la aplicación (aplicación “Saplo Deploy”). A partir de ese momento cualquier git push a la rama de producción (por defecto main) activará un npm install automático, compilación y reinicio. Esto suele tardar de 1 a 3 minutos y el resultado se muestra como un punto verde o rojo en el commit de GitHub. Los detalles están en la Documentación Git Deploy.

Paso 5. Variables de entorno. Configura claves API, direcciones de base de datos y secretos en el panel como variables, no en el código del repositorio.

¿Ya tienes una web en Next.js en Vercel u otro servidor? La Migración a Saplo está incluida en el precio de cada plan.

Preguntas frecuentes

¿Next.js es gratuito?

Sí. Next.js es un software de código abierto bajo la licencia MIT y puedes usarlo comercialmente sin costo alguno. Solo se paga por el hosting donde se aloja el sitio web.

¿Es Next.js bueno para SEO?

Sí, es una de sus principales ventajas. Gracias a la generación de HTML en el servidor o durante la compilación, el motor de búsqueda recibe el contenido completo de inmediato, y la carga rápida ayuda en los Core Web Vitals. Sin embargo, el framework por sí solo no reemplaza un buen contenido ni metadatos correctos.

¿Debo conocer React para usar Next.js?

Para construir una página, sí, porque Next.js es React con añadidos. Para usar una página ya creada, no: si los contenidos vienen desde el panel CMS, el equipo editorial no toca el código.

¿Next.js funcionará en un hosting compartido común?

Solo como exportación estática, sin renderizado en el servidor, ISR ni API propia. La versión completa requiere un proceso Node.js en ejecución, es decir, un servidor, contenedor o plataforma que lo aloje. En Saplo, cada Box es un contenedor separado donde Next.js funciona en su versión completa.

¿Cuánta memoria RAM necesita Next.js?

Un sitio pequeño o mediano funciona con alrededor de 512 MB de memoria. La mayor cantidad de recursos se consume durante la compilación del proyecto, así que para aplicaciones grandes conviene tener un margen, por ejemplo Box M con 2 GB de RAM.