¿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

¿Cómo integrar la API de Gemini con Node.js?