Cuando se construye un sitio web de blog dinámico, es común cargar datos de una fuente de contenido, como un CMS (Sistema de Gestión de Contenidos) como WordPress.

Recientemente, me enfrenté al reto de integrar WordPress en mi proyecto existente de Next.js. Tenía un blog alojado en WordPress y quería migrarlo a mi aplicación de Next.js.

Necesité una solución que me permitiera utilizar WordPress como un CMS sin cabeza. El objetivo era simple: aprovechar la potencia de WordPress para administrar contenido mientras utilizo un marco de frontend moderno para mostrarlo.

En este artículo, veremos cómo integrar WordPress a una aplicación de Next JS.

¿Por qué utilizar un CMS sin cabeza?

Un CMS sin cabeza separa la gestión de contenidos (back-end) de la capa de presentación (front-end). Esto ofrece a los desarrolladores más flexibilidad sobre cómo se entrega y se muestra el contenido, sin ser restringidos por temas o diseños tradicionales.

Es ideal para la performance y la escalabilidad, ofreciendo más control sobre cómo se renderiza el contenido en el frontend. En este caso, utilizarás WordPress como tu sistema de gestión de contenidos pero mostrarás el contenido de una manera más moderna y eficiente utilizando Next.js.

¿Qué es Next.js?

Si aún no has encontrado Next.js, es un poderoso framework basado en React que hace que la construcción de aplicaciones optimizadas, renderizadas en el servidor (SSR), sea mucho más fácil.

Ofrece un montón de características listas para usar como rutas de archivo, rutas de API, generación de sitios estáticos (SSG) y regeneración estática incremental (ISR). Todas estas características lo hacen una gran opción para crear sitios web rápidos y amigables con SEO.

Cómo conectar WordPress y Next.js

Cuando se utiliza WordPress como un CMS sin cabeza, existen dos maneras primarias para conectar tu aplicación Next.js con la base de datos de WordPress:

  1. API REST de WP: WordPress incluye una API REST integrada, que te permite recuperar contenido de WordPress en formato JSON.

  2. WPGraphQL: WordPress soporta la gestión de contenido sin cabeza mediante el uso de GraphQL (con plugins como WPGraphQL), lo que facilita consultar y recuperar contenido específico, como entradas de blog, para usar en un marco frontal como React.

Aunque la API REST es popular, optaremos por WPGraphQL porque permite realizar consultas más precisas y ofrece flexibilidad. Con GraphQL, puedes pedir exactamente la información que necesitas, lo que puede reducir la cantidad de datos transferidos y mejorar el rendimiento.

Pasos para conectar WordPress y Next.js utilizando WPGraphQL

La primera cosa que necesitas hacer es instalar el plugin WPGraphQL en tu sitio de WordPress. Este plugin habilita funcionalidad de API GraphQL dentro de WordPress. Puedes instalar el plugin como cualquier otro, navegando hasta el panel de administración de WordPress.

Primero, ve a Plugins y selecciona Añadir nuevo. Luego, busca WPGraphQL y una vez que lo encuentres, simplemente instala y activa el plugin.

Después de instalar y activar el plugin, la IDE GraphQL aparecerá en el panel de WordPress. Aquí, puedes probar diferentes consultas que puedas necesitar para tu desarrollo frontend.

Ahora vamos al frontend.

Cómo obtener datos de WPGraphQL en Next.js

En tu proyecto Next.js, tendrás que obtener datos de la API GraphQL. Aquí tienes un ejemplo simple usando graphql-request:

1. Instala graphql-request para que sea fácil consultar la API GraphQL:

npm install graphql-request

2. En tu componente Next.js, crea una consulta GraphQL para obtener los posts del blog:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

En el código anterior, tu aplicación Next.js obtiene los posts del blog de tu backend de WordPress usando GraphQL y los muestra en el frontend. La consulta GraphQL se crea para recuperar detalles de los posts como el título, el autor, el contenido y la imagen destacada.

Usando Next.js getStaticProps, los datos se obtienen en el tiempo de construcción y se pasan como props al componente. Los posts del blog se renderizan a través de componentes personalizados como BlogHeader, BlogPosts y BlogNewsletter, haciendo que la página sea dinámica y eficiente.

Este ejemplo muestra cómo WordPress puede utilizarse como un CMS sin cabeza para una aplicación Next.js. Ahora que ha integrado exitosamente WordPress como un CMS sin cabeza en su aplicación Next.js, puede seguir recuperando más datos de la API GraphQL para mejorar la funcionalidad de su aplicación.

Conclusión

Al utilizar WordPress como CMS sin cabeza y Next.js para la interfaz de usuario, podemos construir un blog rápido y amigable con SEO aprovechando las potentes características de gestión de contenido de WordPress.

El uso de WPGraphQL nos permitió recuperar eficientemente solo los datos necesarios, dando más control y mejorando el rendimiento del sitio.

Espero que esto haya sido útil. ¡Buen código!