Headless WordPress y Next.js: beneficios y configuración

El sistema de gestión de contenidos más popular del mundo, WordPress, ha evolucionado más allá de su reputación como una plataforma sólo para blogs. Se ha convertido en un CMS maduro que ha comenzado a incursionar en el territorio “headless” en los últimos años.

Pero los CMSs “headless” necesitan un framework frontend para crear interfaces de usuario atractivas, entonces, ¿cuál deberían elegir los desarrolladores de WordPress para sus sitios? En este artículo, exploraremos por qué Next.js es una opción excelente, por qué los desarrolladores deberían considerar usarlo para sus proyectos y cómo configurarlo.

Comencemos.

¿Qué es WordPress “headless”?

WordPress headless se refiere al uso de WordPress con una arquitectura “headless” en lugar de una tradicional monolítica. En una configuración tradicional, el backend y el frontend de un sitio web se combinan en un único software. El backend gestiona el contenido del sitio, incluidas las bases de datos y servidores, mientras que el frontend es lo que los usuarios ven e interactúan.

Con una arquitectura “headless”, el backend y el frontend están separados. WordPress actúa como el backend, mientras que una plataforma diferente muestra interfaces y contenido amigables para el usuario en el frontend. Tecnologías populares de frontend como React, Angular y Gatsby son comúnmente utilizadas para implementaciones de WordPress “headless”.

Bajo este modelo, WordPress es un centro de contenido y expone una interfaz de programación de aplicaciones (API) que permite a cualquier tecnología frontend acceder y mostrar el contenido.

WordPress “headless” es un concepto relativamente nuevo pero está ganando atención debido a sus potenciales ventajas sobre un modelo monolítico. Ofrece a los desarrolladores flexibilidad en la elección de sus tecnologías frontend y proporciona escalabilidad en la gestión de múltiples canales desde un único backend.

¿Qué es Next.js?

Next.js es un framework frontend de código abierto basado en React. Los desarrolladores utilizan Next.js para crear aplicaciones modernas de React renderizadas por servidor a través de varias funciones potentes que simplifican el desarrollo y ayudan a crear aplicaciones web de alto rendimiento.

Next.js difiere del renderizado del lado del cliente que React implementa por defecto, proporcionando en su lugar renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG). SSR permite a los desarrolladores renderizar componentes de React en el servidor y enviar el HTML generado al cliente. SSG genera archivos HTML estáticos en el tiempo de construcción, que generalmente se sirven a los clientes a través de una red de entrega de contenidos (CDN).

SSR y SSG son más rápidos que el renderizado del lado del cliente porque evitan inicializar el código de React en la máquina del cliente, lo cual puede ralentizar los sitios web si muchos componentes están cargando en pantalla. También ofrecen herramientas de SEO mucho mejores para los desarrolladores.

Además de la renderización del servidor y sus muchos beneficios, Next.js cuenta con múltiples características que lo hacen una elección excelente para los desarrolladores frontend, incluyendo:

• Recarga de Código en Caliente (HCR). Las páginas se recargan automáticamente al guardar cambios.
• Enrutamiento Automático. Las URL se asignan a archivos en la carpeta de páginas sin configuración adicional.
• Componentes de un solo archivo. La biblioteca integrada styled-jsx permite un estilo fácil y específico para cada componente.
• Compatibilidad. Next.js es compatible con el resto de los ecosistemas de JavaScript, Node.js y React.
• División automática de código. Las páginas se dividen en recursos separados, cargando solo el JavaScript necesario por página.
• Prefetching. El componente Link admite el prefetching de recursos de página en segundo plano.
• Componentes dinámicos. Los desarrolladores pueden importar dinámicamente módulos JavaScript y componentes React.
• Exportaciones estáticas. Exporta un sitio completamente estático usando el comando next export.
• Soporte para TypeScript. Next.js está escrito en TypeScript y ofrece un excelente soporte para TypeScript.

¿Por qué usar Next.js como framework frontend para WordPress “headless”?

El modelo “headless” ofrece la posibilidad de crear sitios WordPress flexibles, escalables y de alto rendimiento con el potencial de entrega multicanal sin fisuras. Muchas soluciones frontend se adaptan a WordPress como un CMS “headless”, pero nuestros desarrolladores eligen Next.js porque ofrece algunas de las mejores características de SEO entre cualquier framework disponible.

La renderización del servidor, la capacidad de agregar etiquetas meta a la sección <head> del HTML y el seguimiento nativo de estadísticas SEO esenciales son algunos de los principales beneficios de SEO de Next.js. Sin embargo, el SEO no es la única razón para elegir Next.js (aunque sigue siendo una razón importante). Otras razones por las que elegimos Next.js para el desarrollo “headless” incluyen las siguientes:

• Next.js simplifica el desarrollo proporcionando herramientas y características listas para usar que facilitan la creación y el mantenimiento de aplicaciones frontend complejas sin preocuparse demasiado por el backend de WordPress.
• Next.js es un framework flexible que se integra perfectamente con las instalaciones de WordPress.
• Next.js tiene una gran comunidad que asegura que permanezca actualizado y mantenido. Podés confiar en Next.js para un soporte y estabilidad a largo plazo.
• Next.js es gratuito y de código abierto, lo que lo hace extremadamente rentable.
• Cuando se optimizan adecuadamente, los sitios con Next.js tienen un alto rendimiento y brindan una excelente experiencia de usuario.

En resumen, Next.js es una excelente elección para construir sitios WordPress “headless” porque simplifica el desarrollo, se integra sin problemas con WordPress “headless”, cuenta con un fuerte apoyo de la comunidad, permite una gestión de contenidos sencilla, mejora el SEO, realza la experiencia del usuario y es rentable. Next.js empodera a los desarrolladores para crear aplicaciones web dinámicas, escalables y rápidas. Y por eso utilizamos Next.js para nuestros proyectos de WordPress “headless”.

Cómo configurar un blog básico para WordPress “headless” usando Next.js y GraphQL

Ahora que sabemos qué es Next.js y cómo beneficia a tu proyecto de WordPress “headless”, exploraremos cómo configurar un blog básico para una instalación de WordPress “headless” con Next.js y GraphQL. Para esta guía, vas a necesitar lo siguiente:

• Una instalación de WordPress desplegada. Puede ser un sitio WordPress en vivo o una instalación Local.
• Node.js 16.8 o una versión posterior.
• El plugin WPGraphQL.
• El repositorio de GitHub Next WordPress Starter. Este proyecto se encarga de conectar con WordPress, conectar con la API GraphQL de WordPress, consultar los datos, crear la página de inicio para el blog y la plantilla dinámica para cada publicación individual del blog. Es un excelente punto de partida si sos nuevo en Next.js con WordPress “headless”.

Paso 1: Instalar WordPress

Naturalmente, vas a necesitar una instalación de WordPress que actúe como el centro de contenido que tu frontend impulsado por Next.js mostrará. Necesitarás una instancia en vivo y desplegada de WordPress a la que puedas acceder en internet.

Paso 2: Instalar y activar WPGraphQL

Ve a Plugins > Añadir Nuevo y buscá el plugin WPGraphQL. Instálalo y actívalo.

GraphQL es un lenguaje de consulta de código abierto creado por Meta en 2012, utilizado principalmente para crear APIs versátiles y eficientes, surgiendo como una alternativa a la arquitectura de la API REST, como la que WordPress usa por defecto. El plugin WPGraphQL amplía la funcionalidad de WordPress al exponer sus datos y características a través de un punto final de GraphQL. 

Una vez activo, verás un botón de GraphQL en la barra lateral de tu panel de administración. Desplazá el puntero sobre él y hacé clic en GraphiQL IDE. Esto te llevará al área de pruebas de GraphQL, donde podés escribir consultas a tu base de datos. En el área de pruebas, podés experimentar con consultas escribiéndolas en el panel de la izquierda. Por ejemplo, el siguiente esquema consulta todos los títulos de cada publicación en tu sitio:

query postsQuery{
  posts{
    edges{
      node{
        title
        }
      }
  }
}

Ejecutá la consulta haciendo clic en el botón “Play” en la parte superior, y obtendrás una respuesta como la siguiente en el panel derecho:

{
  "data": {
    "posts": {
      "edges": [
      {
        "node": {
          "title": "Título del Post 1"
        }
      },
      {
        "node": {
          "title": "Título del Post 2"
        }
      },
      {
        "node": {
          "title": "Título del Post 3"
        }
      }
    ]
  }
}

El contenido exacto de la respuesta depende de las publicaciones actuales en tu WordPress, pero obtener una respuesta exitosa significa que WPGraphQL está funcionando, y podés conectar tu backend de WordPress “headless” con cualquier framework moderno de frontend.

Paso 3: Clonar el repositorio inicial

Cloná el repositorio Next WordPress Starter desde la consola usando este comando:

git clone https://github.com/colbyfayock/next-wordpress-starter

Para clonarlo desde Github Desktop, ve a Añadir… > Clonar Repositorio.

Luego pegá la URL del repositorio en la sección URL.

Ahora abrí la carpeta en Visual Studio Code o tu editor de código preferido. El proyecto contiene una configuración de Next.js bastante estándar.

Si explorás el archivo package.json, notarás la siguiente función para soporte de Apollo, un popular cliente de GraphQL:

"@apollo/client": "^3.7.14"

Este proyecto utiliza el cliente Apollo GraphQL para enviar consultas a tu backend de WordPress. Sin embargo, vas a tener que añadir una variable de entorno antes de poder empezar a enviar consultas y conectar exitosamente tu sitio WordPress con este proyecto de Next.js.

Paso 4: Añadir la variable de entorno

Añadí el archivo .env.local al directorio raíz de tu proyecto. .env.local es el archivo donde podés añadir variables de entorno mientras probás en Next.js.

Añadí el siguiente código al nuevo archivo .env.local:

WORDPRESS_GRAPHQL_ENDPOINT=http://wordpressite.com/graphql

Este es el único punto final de GraphQL que tu sitio de Next.js consumirá para mostrar el contenido en el frontend. Sustituí “wordpressite.com” con el nombre de dominio de tu sitio WordPress.

Si estás utilizando una instalación Local, usá la dirección local de tu sitio:

WORDPRESS_GRAPHQL_ENDPOINT=http://wordpressite.local/graphql

Paso 5: Instalar dependencias y ejecutar tu sitio

Ahora solo queda instalar las dependencias, y finalmente podrás comenzar a gestionar tu sitio. Para instalar dependencias, ejecutá el siguiente comando en la consola:

npm install

Una vez que todas las dependencias están instaladas, escribí el siguiente comando para ejecutar la aplicación en modo de desarrollo:

npm run dev

Para ver tu sitio frontend de Next.js en acción, pegá “http://localhost:3000” en tu navegador, ¡y deberías poder experimentar tu sitio! A partir de este momento, cualquier cambio que realices en el backend de WordPress se reflejará en el frontend de Next.js.

Sin embargo, recordá que necesitas ejecutar “npm run dev” nuevamente cada vez que quieras ver los cambios, ya que necesitás esperar a que el servidor local pase por otro proceso de construcción.

¡Ahora comenzá a editar y gestionar tu sitio!

Next.js te ayuda a desarrollar sitios WordPress “headless” rápidos y flexibles

WordPress se ha transformado de una plataforma de blogs a un poderoso CMS que ahora puede impulsar arquitecturas “headless”. Entre los varios frameworks frontend disponibles, Next.js se destaca como una excelente elección para desarrolladores.

Next.js empodera a los desarrolladores para crear aplicaciones web dinámicas, escalables y rápidas con WordPress “headless”. Al aprovechar sus características, los desarrolladores aprovechan sus beneficios para agilizar procesos de desarrollo, mejorar el SEO y proporcionar experiencias de usuario excepcionales. Su versatilidad es una herramienta valiosa para construir proyectos “headless” de WordPress.

Esperamos que hayas encontrado útil esta guía y ahora puedas comenzar a gestionar tu instalación de WordPress “headless” utilizando Next.js como framework frontend. ¡Buena suerte!

Para más guías e información sobre WordPress, visitá nuestro blog!