WordPress headless + Next.js: plan de batalla para 2026

Qué significa headless

En una arquitectura headless, WordPress sigue siendo el lugar donde los editores escriben y gestionan el contenido, pero ya no genera la web pública. Un front end separado —aquí Next.js— obtiene el contenido mediante la REST API de WordPress o WPGraphQL y construye las páginas.

Las ventajas son velocidad, seguridad (el panel de WordPress puede estar en una dirección privada), libertad de diseño y la posibilidad de enviar el mismo contenido a una web, apps y otros canales. Los costes son dos sistemas que alojar y mantener, y funciones que normalmente dan los temas y plugins de WordPress deben reconstruirse en el front end.

Cuándo merece la pena

• Grandes sitios de contenido y medios donde importan la velocidad y la escala.
• Marcas que necesitan un front end muy personalizado, tipo aplicación.
• Contenido compartido entre web, apps móviles y otros canales.
• Equipos que ya tienen desarrolladores de React o Next.js.

Para una web corporativa sencilla o un pequeño negocio con pocas páginas, un tema de WordPress tradicional bien hecho suele ser más barato e igual de rápido.

Renderizado: páginas estáticas siempre al día

Genera las páginas de forma estática y sírvelas desde un CDN para que los visitantes reciban el HTML al instante. En lugar de reconstruir todo el sitio, usa la revalidación bajo demanda: cuando un editor publica o actualiza una entrada, un pequeño hook de WordPress llama a un endpoint secreto de Next.js, que revalida solo las páginas o etiquetas afectadas. El contenido está publicado en segundos y las páginas siguen siendo rápidas.

// app/api/revalidate/route.js — called by WordPress on publish
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const { secret, tag } = await request.json();
  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ ok: false }, { status: 401 });
  }
  revalidateTag(tag);
  return Response.json({ ok: true });
}

Vistas previas para los editores

Los editores esperan que el botón Vista previa funcione. Usa el draft mode de Next.js: WordPress enlaza a una ruta de vista previa con un secreto y el ID de la entrada, la ruta activa el draft mode y la página obtiene la última revisión con una petición autenticada (por ejemplo con una contraseña de aplicación o un token). Prueba las vistas previas de entradas sin publicar, programadas y páginas con campos personalizados.

SEO en un proyecto headless

• Expón por la API los campos del plugin SEO (título, descripción, canonical, imagen social, schema) y muéstralos en los metadatos de Next.js.
• Genera el sitemap y el robots.txt desde el front end con el contenido de WordPress.
• Gestiona las redirecciones en WordPress y sincronízalas con el front end para que los editores mantengan el control.
• Mantén las mismas URL en una migración o redirige cada URL antigua.

Imágenes, formularios y búsqueda

Sirve los medios de WordPress mediante la optimización de imágenes de Next.js o un CDN de imágenes, permitiendo el dominio de medios de WordPress en la configuración. Los formularios necesitan un destino: envíalos a una ruta de Next.js que valide y reenvíe a tu CRM o email, o usa la API de un plugin de formularios. La búsqueda del sitio suele pasar a un servicio dedicado o a un endpoint sencillo, porque la página de búsqueda del tema ya no existe.

Problemas que planificamos

• Los maquetadores visuales guardan el diseño como shortcodes o marcado propio difícil de mostrar en otro sitio; mejor bloques de Gutenberg o campos personalizados.
• Menús, widgets y funciones de plugins que dependen del tema necesitan equivalentes en la API.
• Protege el panel de WordPress y desactiva el tema público para evitar contenido duplicado.
• El contenido multilingüe necesita un plugin con soporte de API y una estrategia de URL clara en Next.js.

Una lista antes de empezar

Acordad el modelo de contenido (tipos de entrada, campos, bloques), cómo funcionan las vistas previas y la publicación, dónde viven las redirecciones y los campos SEO, cómo se gestionan formularios y búsqueda, y quién aloja y supervisa cada parte. Con esas decisiones tomadas de antemano, WordPress headless da a los editores la herramienta que conocen y a los visitantes una web rápida en todas partes.