¿Quieres construir sitios ultra rápidos combinando la facilidad de WordPress con la potencia de frameworks modernos?
En este tutorial aprenderás a crear un sistema Headless usando WordPress como backend y Next.js como frontend.

Veremos paso a paso cómo configurar WordPress, crear un proyecto en Next.js, consumir la API REST de WordPress y renderizar posts en una aplicación moderna y totalmente desacoplada.

1. ¿Qué es un CMS y qué es Headless?

WordPress es un CMS (Content Management System), es decir, una plataforma que permite a cualquier usuario crear, editar y administrar contenido. Tradicionalmente, WordPress combina:

Backend: base de datos, plugins, lógica de negocio.
Frontend: el theme encargado del HTML y CSS.

En un enfoque Headless, se separa completamente el backend del frontend. WordPress sigue administrando contenido, pero el renderizado lo hace Next.js consultando la API de WordPress.

Esto permite:

Mayor velocidad gracias a contenido estático.
Más seguridad al no exponer el theme tradicional.
Elegir tu stack: Next.js, Gatsby, Nuxt, SvelteKit, etc.

2. Requisitos previos

Una instalación de WordPress.
Node.js instalado.
Conocimientos básicos de JavaScript.

El tutorial recomienda usar Docker o Laradock para levantar WordPress fácilmente.

3. Crear el proyecto con Next.js

En tu terminal ejecuta:


npx create-next-app@latest tutorial-headless

Luego:


cd tutorial-headless
npm run dev

4. Crear variables de entorno

En la raíz del proyecto, crea .env.local:


NEXT_PUBLIC_WORDPRESS_API=https://tusitio.com/wp-json/wp/v2

El prefijo NEXT_PUBLIC_ permite usar la variable tanto en el servidor como en el cliente.

5. Crear librería para la API de WordPress

Crea la carpeta lib/ y dentro un archivo wordpress.js:


const API_URL = process.env.NEXT_PUBLIC_WORDPRESS_API || "";

// fetch genérico
export async function fetchFromWP(endpoint) {
  const response = await fetch(API_URL + endpoint);
  if (!response.ok) {
    console.error("Error:", response.statusText);
    throw new Error("Error al consultar WordPress");
  }
  return response.json();
}

// obtener posts
export async function getPosts() {
  return fetchFromWP("/posts");
}

// obtener post por slug
export async function getPostBySlug(slug) {
  const posts = await fetchFromWP(`/posts?slug=${slug}`);
  return posts.length ? posts[0] : null;
}

6. Mostrar posts en Next.js

Modifica app/page.js:


import Link from "next/link";
import { getPosts } from "@/lib/wordpress";

export default async function Home() {
  const posts = await getPosts();

  return (
    
      {posts.map((post) => (
        
          
            
              {post.title.rendered}
            
          
        
      ))}
    
  );
}

7. Crear página dinámica por slug

Crea:

app/posts/[slug]/page.js

Y agrega lo siguiente:


import { getPostBySlug } from "@/lib/wordpress";

export default async function PostPage({ params }) {
  const post = await getPostBySlug(params.slug);

  if (!post) {
    return Post no encontrado;
  }

  return (
    
      {post.title.rendered}
      
    
  );
}

8. Mejoras recomendadas

Estilizar el proyecto con Tailwind o CSS Modules.
Definir interfaces y tipos (TypeScript).
Manejar categorías, páginas, autores, etc.
Implementar ISR o caching.

9. Repositorio del proyecto

Código completo: 👉 tutorial-headless

Pensamientos finales

Combinar WordPress con Next.js en un entorno Headless te permite crear sitios rápidos, seguros y con total libertad tecnológica.

Este tutorial es una base perfecta para proyectos modernos como blogs, landings, sitios corporativos o e-commerce headless.

¡Espero que te sirva para tus próximos desarrollos!

Tutoriales

Headless WordPress + Next.js explicado y construido paso a paso