WordPress existe desde hace más de 20 años, y alimenta el 42,7% de todos los sitios web de Internet, según W3Techs. También tiene una cuota de mercado del 62,5% en sistemas de gestión de contenidos (CMS, content management systems) para sitios web.
Hoy en día, hay muchos lenguajes de programación y frameworks disponibles para construir sitios web fáciles de usar y de alto rendimiento que son mucho más rápidos que WordPress, independientemente de la optimización que hagas en tu panel de WordPress. Un ejemplo es Next.js, un popular framework React.
Esta guía muestra cómo utilizar WordPress como un CMS headless, proporcionando datos para tu aplicación Next.js. También explica cómo desplegar tu código Next.js como un sitio estático en el servicio gratuito de Alojamiento de Sitios Estáticos de Kinsta.
Entendiendo WordPress headless
WordPress headless se refiere al uso de WordPress únicamente para sus capacidades de backend — gestión y almacenamiento de contenidos — y al uso de un sistema independiente, como Next.js, para la presentación del frontend.
Este desacoplamiento permite a los desarrolladores utilizar las sólidas herramientas de gestión de contenidos de WordPress y, al mismo tiempo, aprovechar al máximo las modernas funciones de desarrollo del frontend, como la renderización del lado del servidor y la generación de sitios estáticos en Next.js.
Preparando tu sitio de WordPress
Antes de sumergirte en el desarrollo de Next.js, tu sitio de WordPress necesita un poco de preparación para servir como un CMS headless.
Si aún no tienes un sitio de WordPress, puedes crear uno fácilmente con Kinsta. Existen tres métodos para crear un sitio WordPress utilizando Kinsta:
- Crear un sitio en tu máquina local (quizás utilizando nuestras herramientas DevKinsta) antes de trasladar el sitio a nuestros servidores
- Crear un sitio en remoto utilizando el panel MyKinsta
- Crear un sitio en remoto utilizando la API de Kinsta
Una vez que tengas un sitio de WordPress, hay dos enfoques para obtener datos de tu CMS de WordPress en tu framework frontend: WPGraphQL y API REST.
La API REST facilita la recuperación de datos en formato JSON utilizando enfoques JavaScript como la API Fetch o la biblioteca Axios. La API REST está integrada en WordPress desde la versión 4.7, lo que significa que no requiere ningún plugin para funcionar. Pero para utilizar WPGraphQL, que te permite interactuar con los datos de WordPress mediante consultas GraphQL, debes instalar el plugin WPGraphQL.
Vamos a utilizar la API REST para esta guía. Para obtener los datos de tu WordPress en formato JSON, añade /wp-json/wp/v2 a la URL de tu sitio WordPress:
http://yoursite.com/wp-json/wp/v2Si la API JSON no está activada cuando visitas http://yoursite.com/wp-json por defecto, puedes activarla abriendo Permalinks en Ajustes en el panel de control de WordPress y seleccionando Nombre de la Entrada o cualquier otro de tu elección excepto Simple:
Esto funciona para sitios de WordPress locales y públicos, ofreciendo endpoints para contenido que incluye entradas, páginas, comentarios y medios. Lee nuestra guía completa sobre la API REST para obtener más información.
Configurar tu entorno Next.js
Next.js ayuda a los desarrolladores a crear aplicaciones web con facilidad, mejorando el rendimiento y optimizando la experiencia de desarrollo. Una de sus características clave es el enrutamiento basado en archivos, que simplifica la creación de rutas.
Next.js también se centra mucho en el rendimiento, ofreciendo funciones como la división de código automática, que carga sólo el JavaScript necesario para cada página, reduciendo significativamente el tiempo de carga.
Para configurar un proyecto Next.js, puedes ejecutar el siguiente comando y utilizar sus respuestas predeterminadas:
npx create-next-app@latest nextjs-wp-demoPara esta guía, puedes coger nuestra plantilla de inicio Git siguiendo estos pasos:
- Visita el repositorio GitHub de este proyecto.
- Selecciona Usar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un repositorio dentro de tu cuenta de GitHub (marca la casilla para incluir todas las ramas).
- Extrae el repositorio a tu ordenador local y cambia a la rama starter-files utilizando el comando :
git checkout starter-files.
- Instala las dependencias necesarias ejecutando el comando
npm install.
Una vez completada la instalación, inicia el proyecto en tu ordenador local con npm run dev. Esto hace que el proyecto esté disponible en http://localhost:3000/.
Comprender el proyecto
El App Router se introdujo en Next.js 13, sustituyendo al directorio pages existente para el enrutamiento. Enrutar con el App Router también implica crear carpetas dentro del directorio app. Entonces, anidas un archivo page.js dentro de la carpeta apropiada para definir tu ruta.
En este proyecto, app es el directorio principal con el que interactuarías, y encontrarás la siguiente estructura de archivos.
/
|-- /app
|-- /blog
|-- /[postId]
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.jsSe crean tres páginas: la página de inicio para mostrar información básica, la página del blog para mostrar todas las entradas de tu CMS WordPress, y la página dinámica ([postId]/page.js) para mostrar entradas individuales.
También verás el componente navbar.js, que se importa en el archivo layout.js para crear un diseño para el proyecto.
Obtención de datos de WordPress para Next.js
Con la API REST de WordPress, puedes obtener entradas, páginas y tipos de entradas personalizados enviando peticiones HTTP a endpoints específicos.
Vamos a realizar una solicitud de obtención en el archivo blog/page.js para obtener todas las entradas de tu CMS WordPress y, finalmente, hacemos una solicitud para obtener cada entrada dinámicamente en blog/[postId]/page.js basándonos en el parámetro id pasado.
Antes de realizar estas peticiones, es una buena práctica añadir tu dirección API JSON a una variable de entorno. Este enfoque garantiza que la URL base de tu API sea fácilmente configurable y no esté codificada en varios archivos.
Crea un archivo .env en la raíz de tu proyecto Next.js y añade lo siguiente:
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2Asegúrate de sustituir la URL por la API JSON de tu sitio. Además, añade .env a tu archivo .gitignore para que no envíe el archivo a tu proveedor Git.
Obtener todas las entradas de WordPress en Next.js
Para obtener todas las entradas de tu sitio de WordPress, crea una función asíncrona llamada getPosts en tu archivo blog/page.js. Esta función utiliza la API Fetch para realizar una solicitud GET al endpoint /posts de tu API REST de WordPress.
async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}Al recibir la respuesta, la convierte a JSON y crea un array de objetos de entrada. Estos posts se pueden mostrar en tu aplicación Next.js, proporcionando una lista dinámica de entradas de blog obtenidas directamente de WordPress.
const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
return (
<Link href={`/blog/${post.id}`} className="post" key={post.id}>
<h3>{post.title.rendered}</h3>
<p
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
></p>
</Link>
);
})}
</div>
</div>
);
};Dentro del componente de página Next.js, llama a getPosts de forma asíncrona para obtener las entradas. A continuación, map sobre el array de posts, mostrando title y excerpt de cada entrada dentro de un componente <Link>.
Esto no sólo muestra las entradas, sino que también las envuelve en un enlace que lleva a una vista detallada de la entrada. Esto se consigue utilizando el enrutamiento basado en archivos de Next.js, en el que el ID de la entrada se utiliza para generar la ruta URL dinámicamente.
Obtener entradas dinámicas de WordPress a Next.js
En el código anterior, cada entrada está envuelta en un enlace que se espera que ayude a los usuarios a navegar a una vista detallada de la entrada.
Para las páginas de entradas individuales, utiliza el enrutamiento dinámico en Next.js para crear una página que obtenga y muestre una única entrada basándose en su ID. Ya se ha creado una página dinámica [postID]/page.js en el código de stater-files.
Crea una función getSinglePost, similar a getPosts, para obtener una única entrada utilizando el ID de la entrada introducido como parámetro.
async function getSinglePost(postId) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
);
const post = await response.json();
return post;
}En el componente de página dinámica, extrae el ID de la entrada de los parámetros de la URL, llama a getSinglePost con este ID y muestra el contenido de la entrada.
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};A continuación, puedes rellenar la página con los datos obtenidos:
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
</div>
</div>
);
};Puedes acceder al código completo en nuestro repositorio de GitHub.
Despliega gratis tu aplicación Next.js en Kinsta
El servicio de Alojamiento de Sitios Estáticos de Kinsta ofrece la posibilidad de alojar hasta 100 sitios estáticos de forma gratuita.
Este servicio sólo aloja archivos estáticos. Si utilizas un generador de sitios estáticos como Next.js, puedes configurar opciones que construyan tu proyecto desde GitHub y desplieguen los archivos estáticos en Kinsta.
Exportación estática en Next.js
Para habilitar una exportación estática en Next.js versión 13 o superior, cambia el modo output dentro de next.config.js:
const nextConfig = {
output: 'export',
};Ahora, cuando construyas tu proyecto, se espera que Next.js produzca una carpeta out que contenga los activos HTML, CSS y JavaScript de tu aplicación.
Desde la versión 13, Next.js soporta comenzar como un sitio estático y, posteriormente, actualizarlo de forma opcional para utilizar funciones que requieren un servidor. Cuando utilices funciones de servidor, la construcción de tus páginas no generará páginas estáticas.
Por ejemplo, en la ruta dinámica, estás obteniendo estos datos dinámicamente. Necesitas poder generar todas las entradas estáticamente. Esto se puede hacer utilizando la función generateStaticParams.
La función se utiliza en combinación con segmentos de rutas dinámicas para generar rutas estáticamente en el momento de la construcción, en lugar de hacerlo bajo demanda en el momento de la solicitud. Cuando construyes, generateStaticParams se ejecuta antes de que se generen los diseños o páginas correspondientes.
En [postID]/page.js, utiliza la función generateStaticParams para obtener la ruta de todos los posts:
export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}Cuando ejecutes el comando de construcción, tu proyecto Next.js generará ahora un directorio out con los archivos estáticos.
Despliega Next.js en el alojamiento de sitios estáticos de Kinsta
Envía tu código a tu proveedor Git preferido (Bitbucket, GitHub o GitLab). A continuación, sigue estos pasos para desplegar tu sitio estático Next.js en Kinsta:
- Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
- Autoriza a Kinsta con tu proveedor de Git.
- Haz clic en Sitios Estáticos en la barra lateral izquierda y, a continuación, en Añadir sitio.
- Selecciona el repositorio y la rama desde la que deseas desplegar.
- Asigna un nombre único a tu sitio.
- Añade la configuración de construcción en el siguiente formato:
- Comando de construcción:
npm run build - Versión de Node:
18.16.0 - Directorio de publicación:
out
- Comando de construcción:
- Por último, haz clic en Crear sitio.
¡Y ya está! En pocos segundos tendrás un sitio desplegado. Se proporciona un enlace para acceder a la versión desplegada de tu sitio. Si lo deseas, puedes añadir más adelante tu dominio personalizado y tu certificado SSL.
Como alternativa al alojamiento de sitios estáticos, puedes optar por desplegar tu sitio estático con el servicio de Alojamiento de Aplicaciones de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama más amplia de ventajas y acceso a funciones más robustas, como escalabilidad, despliegue personalizado mediante un Dockerfile y analíticas exhaustivas que abarcan datos históricos y en tiempo real. Tampoco necesitas configurar tu proyecto Next.js para la renderización estática.
Resumen
En este artículo, has aprendido cómo aprovechar WordPress headless en un proyecto Next.js para obtener y mostrar entradas dinámicamente. Este enfoque permite la integración perfecta del contenido de WordPress en las aplicaciones Next.js, ofreciendo una experiencia web moderna y dinámica.
El potencial de la API CMS headless va más allá de las entradas; permite recuperar y gestionar páginas, comentarios, medios y mucho más.
Además, alojar tu CMS de WordPress junto a tus frameworks frontend no tiene por qué ser una molestia. Con el panel de control MyKinsta de Kinsta, se te ofrece una plataforma unificada para gestionar tus sitios de WordPress, aplicaciones, bases de datos y sitios estáticos con facilidad.
Deja una respuesta