{"id":74007,"date":"2024-03-04T09:07:30","date_gmt":"2024-03-04T08:07:30","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74007&preview=true&preview_id=74007"},"modified":"2024-03-06T13:47:13","modified_gmt":"2024-03-06T12:47:13","slug":"wordpress-headless-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-next-js\/","title":{"rendered":"C\u00f3mo utilizar WordPress como un CMS headless para Next.js"},"content":{"rendered":"

WordPress existe desde hace m\u00e1s de 20 a\u00f1os, y alimenta el 42,7% de todos los sitios web de Internet, seg\u00fan W3Techs<\/a>. Tambi\u00e9n tiene una cuota de mercado del 62,5% en sistemas de gesti\u00f3n de contenidos (CMS, content management systems) para sitios web.<\/p>\n

Hoy en d\u00eda, hay muchos lenguajes de programaci\u00f3n y frameworks disponibles para construir sitios web f\u00e1ciles de usar y de alto rendimiento que son mucho m\u00e1s r\u00e1pidos que WordPress, independientemente de la optimizaci\u00f3n que hagas en tu panel de WordPress. Un ejemplo es Next.js<\/a>, un popular framework React.<\/p>\n

Esta gu\u00eda muestra c\u00f3mo utilizar WordPress como un CMS headless, proporcionando datos para tu aplicaci\u00f3n Next.js. Tambi\u00e9n explica c\u00f3mo desplegar tu c\u00f3digo Next.js como un sitio est\u00e1tico<\/a> en el servicio gratuito de Alojamiento de Sitios Est\u00e1ticos<\/a> de Kinsta.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Entendiendo WordPress headless<\/h2>\n

WordPress headless se refiere al uso de WordPress \u00fanicamente para sus capacidades de backend\u00a0 \u2014 gesti\u00f3n y almacenamiento de contenidos \u2014 y al uso de un sistema independiente, como Next.js, para la presentaci\u00f3n del frontend.<\/p>\n

Este desacoplamiento permite a los desarrolladores utilizar las s\u00f3lidas herramientas de gesti\u00f3n de contenidos de WordPress y, al mismo tiempo, aprovechar al m\u00e1ximo las modernas funciones de desarrollo del frontend, como la renderizaci\u00f3n del lado del servidor y la generaci\u00f3n de sitios est\u00e1ticos en Next.js.<\/p>\n

Preparando tu sitio de WordPress<\/h3>\n

Antes de sumergirte en el desarrollo de Next.js, tu sitio de WordPress necesita un poco de preparaci\u00f3n para servir como un CMS headless<\/a>.<\/p>\n

Si a\u00fan no tienes un sitio de WordPress, puedes crear uno f\u00e1cilmente con Kinsta. Existen tres m\u00e9todos para crear un sitio WordPress utilizando Kinsta:<\/p>\n

    \n
  1. Crear un sitio en tu m\u00e1quina local<\/a> (quiz\u00e1s utilizando nuestras herramientas DevKinsta<\/a>) antes de trasladar el sitio a nuestros servidores<\/li>\n
  2. Crear un sitio en remoto utilizando el panel MyKinsta<\/a><\/li>\n
  3. Crear un sitio en remoto utilizando la API de Kinsta<\/a><\/li>\n<\/ol>\n

    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<\/a>.<\/p>\n

    La API REST facilita la recuperaci\u00f3n de datos en formato JSON utilizando enfoques JavaScript como la API Fetch<\/a> o la biblioteca Axios<\/a>. La API REST est\u00e1 integrada en WordPress desde la versi\u00f3n 4.7, lo que significa que no requiere ning\u00fan plugin para funcionar. Pero para utilizar WPGraphQL, que te permite interactuar con los datos de WordPress mediante consultas GraphQL, debes instalar el plugin WPGraphQL.<\/p>\n

    Vamos a utilizar la API REST para esta gu\u00eda. Para obtener los datos de tu WordPress en formato JSON, a\u00f1ade \/wp-json\/wp\/v2<\/code> a la URL de tu sitio WordPress:<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Si la API JSON no est\u00e1 activada cuando visitas http:\/\/yoursite.com\/wp-json<\/code> por defecto, puedes activarla abriendo Permalinks<\/strong> en Ajustes<\/strong> en el panel de control de WordPress y seleccionando Nombre de la Entrada<\/strong> o cualquier otro de tu elecci\u00f3n excepto Simple<\/strong>:<\/p>\n
    \"Configura
    Configura la API REST de WordPress para acceder a los datos JSON.<\/figcaption><\/figure>\n
    Esto funciona para sitios de WordPress locales y p\u00fablicos, ofreciendo endpoints<\/a>\u00a0para contenido que incluye entradas<\/a>, p\u00e1ginas<\/a>, comentarios<\/a> y medios<\/a>. Lee nuestra gu\u00eda completa sobre la API REST<\/a> para obtener m\u00e1s informaci\u00f3n.<\/p>\n
    Configurar tu entorno Next.js<\/h2>\n
    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\u00edsticas clave es el enrutamiento basado en archivos, que simplifica la creaci\u00f3n de rutas.<\/p>\n
    Next.js tambi\u00e9n se centra mucho en el rendimiento, ofreciendo funciones como la divisi\u00f3n de c\u00f3digo<\/a> autom\u00e1tica, que carga s\u00f3lo el JavaScript necesario para cada p\u00e1gina, reduciendo significativamente el tiempo de carga.<\/p>\n
    Para configurar un proyecto Next.js, puedes ejecutar el siguiente comando y utilizar sus respuestas predeterminadas:<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    Para esta gu\u00eda, puedes coger nuestra plantilla de inicio Git<\/a> siguiendo estos pasos:<\/p>\n
      \n
    1. Visita el repositorio GitHub<\/a> de este proyecto.<\/li>\n
    2. Selecciona Usar esta plantilla<\/strong> > Crear un nuevo repositorio<\/strong> para copiar el c\u00f3digo de inicio en un repositorio dentro de tu cuenta de GitHub (marca la casilla para incluir todas las ramas<\/strong>).<\/li>\n
    3. Extrae el repositorio a tu ordenador local y cambia a la rama starter-files<\/a> utilizando el comando : git checkout starter-files<\/code>.<\/li>\n<\/ol>\n
        \n
      1. Instala las dependencias necesarias ejecutando el comando npm install<\/code>.<\/li>\n<\/ol>\n
        Una vez completada la instalaci\u00f3n, inicia el proyecto en tu ordenador local con npm run dev<\/code>. Esto hace que el proyecto est\u00e9 disponible en http:\/\/localhost:3000\/<\/a>.<\/p>\n
        \"Captura
        Captura de pantalla de un proyecto inicial creado con Next.js.<\/figcaption><\/figure>\n
        Comprender el proyecto<\/h3>\n
        El App Router se introdujo en Next.js 13, sustituyendo al directorio pages<\/strong> existente para el enrutamiento. Enrutar con el App Router tambi\u00e9n implica crear carpetas dentro del directorio app<\/strong>. Entonces, anidas un archivo page.js<\/strong> dentro de la carpeta apropiada para definir tu ruta.<\/p>\n
        En este proyecto, app<\/strong> es el directorio principal con el que interactuar\u00edas, y encontrar\u00e1s la siguiente estructura de archivos.<\/p>\n
        \/\n|-- \/app\n    |-- \/blog\n        |-- \/[postId]\n        \t|-- page.js\n        |-- page.js\n    |-- globals.css\n    |-- layout.js\n    |-- navbar.js\n    |-- page.js<\/code><\/pre>\n
        Se crean tres p\u00e1ginas: la p\u00e1gina de inicio para mostrar informaci\u00f3n b\u00e1sica, la p\u00e1gina del blog para mostrar todas las entradas de tu CMS WordPress, y la p\u00e1gina din\u00e1mica ([postId]\/page.js<\/strong>) para mostrar entradas individuales.<\/p>\n
        Tambi\u00e9n ver\u00e1s el componente navbar.js<\/strong>, que se importa en el archivo layout.js<\/strong> para crear un dise\u00f1o para el proyecto.<\/p>\n
        Obtenci\u00f3n de datos de WordPress para Next.js<\/h2>\n
        Con la API REST de WordPress, puedes obtener entradas, p\u00e1ginas y tipos de entradas personalizados enviando peticiones HTTP a endpoints espec\u00edficos.<\/p>\n
        Vamos a realizar una solicitud de obtenci\u00f3n en el archivo blog\/page.js<\/strong> para obtener todas las entradas de tu CMS WordPress y, finalmente, hacemos una solicitud para obtener cada entrada din\u00e1micamente en blog\/[postId]\/page.js<\/strong> bas\u00e1ndonos en el par\u00e1metro id<\/code> pasado.<\/p>\n
        Antes de realizar estas peticiones, es una buena pr\u00e1ctica a\u00f1adir tu direcci\u00f3n API JSON a una variable de entorno. Este enfoque garantiza que la URL base de tu API sea f\u00e1cilmente configurable y no est\u00e9 codificada en varios archivos.<\/p>\n
        Crea un archivo .env<\/strong> en la ra\u00edz de tu proyecto Next.js y a\u00f1ade lo siguiente:<\/p>\n
        NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
        Aseg\u00farate de sustituir la URL por la API JSON de tu sitio. Adem\u00e1s, a\u00f1ade .env<\/code> a tu archivo .gitignore<\/a><\/strong> para que no env\u00ede el archivo a tu proveedor Git.<\/p>\n
        Obtener todas las entradas de WordPress en Next.js<\/h3>\n
        Para obtener todas las entradas de tu sitio de WordPress, crea una funci\u00f3n as\u00edncrona llamada getPosts<\/code> en tu archivo blog\/page.js<\/strong>. Esta funci\u00f3n utiliza la API Fetch para realizar una solicitud GET al endpoint \/posts<\/code> de tu API REST de WordPress.<\/p>\n
        async function getPosts() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n    return posts;\n}<\/code><\/pre>\n
        Al recibir la respuesta, la convierte a JSON y crea un array de objetos de entrada. Estos posts<\/code> se pueden mostrar en tu aplicaci\u00f3n Next.js, proporcionando una lista din\u00e1mica de entradas de blog obtenidas directamente de WordPress.<\/p>\n
        const BlogPage = async () => {\n    const posts = await getPosts();\n    return (\n        <div className=\"blog-page\">\n            <h2>All Blog Posts<\/h2>\n            <p>All blog posts are fetched from WordPress via the WP REST API.<\/p>\n            <div className=\"posts\">\n                {posts.map((post) => {\n                    return (\n                        <Link href={`\/blog\/${post.id}`} className=\"post\" key={post.id}>\n                            <h3>{post.title.rendered}<\/h3>\n                            <p\n                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n                            ><\/p>\n                        <\/Link>\n                    );\n                })}\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Dentro del componente de p\u00e1gina Next.js, llama a getPosts<\/code> de forma as\u00edncrona para obtener las entradas. A continuaci\u00f3n, map<\/code> sobre el array de posts<\/code>, mostrando title<\/code> y excerpt<\/code> de cada entrada dentro de un componente <Link><\/code>.<\/p>\n
        Esto no s\u00f3lo muestra las entradas, sino que tambi\u00e9n 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\u00e1micamente.<\/p>\n
        Obtener entradas din\u00e1micas de WordPress a Next.js<\/h3>\n
        En el c\u00f3digo anterior, cada entrada est\u00e1 envuelta en un enlace que se espera que ayude a los usuarios a navegar a una vista detallada de la entrada.<\/p>\n
        Para las p\u00e1ginas de entradas individuales, utiliza el enrutamiento din\u00e1mico en Next.js para crear una p\u00e1gina que obtenga y muestre una \u00fanica entrada bas\u00e1ndose en su ID. Ya se ha creado una p\u00e1gina din\u00e1mica [postID]\/page.js<\/strong> en el c\u00f3digo de stater-files.<\/p>\n
        Crea una funci\u00f3n getSinglePost<\/code>, similar a getPosts<\/code>, para obtener una \u00fanica entrada utilizando el ID de la entrada introducido como par\u00e1metro.<\/p>\n
        async function getSinglePost(postId) {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts\/${postId}`\n    );\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n
        En el componente de p\u00e1gina din\u00e1mica, extrae el ID de la entrada de los par\u00e1metros de la URL, llama a getSinglePost<\/code> con este ID y muestra el contenido de la entrada.<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
        A continuaci\u00f3n, puedes rellenar la p\u00e1gina con los datos obtenidos:<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    if (!post) {\n        return <div>Loading...<\/div>;\n    }\n    return (\n        <div className=\"single-blog-page\">\n            <h2>{post.title.rendered}<\/h2>\n            <div className=\"blog-post\">\n                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}><\/p>\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Puedes acceder al c\u00f3digo completo en nuestro repositorio de GitHub<\/a>.<\/p>\n
        Despliega gratis tu aplicaci\u00f3n Next.js en Kinsta<\/h2>\n
        El servicio de Alojamiento de Sitios Est\u00e1ticos<\/a> de Kinsta ofrece la posibilidad de alojar hasta 100 sitios est\u00e1ticos de forma gratuita<\/strong>.<\/p>\n
        Este servicio s\u00f3lo aloja archivos est\u00e1ticos. Si utilizas un generador de sitios est\u00e1ticos<\/a> como Next.js, puedes configurar opciones que construyan tu proyecto desde GitHub y desplieguen los archivos est\u00e1ticos en Kinsta.<\/p>\n
        Exportaci\u00f3n est\u00e1tica en Next.js<\/h3>\n
        Para habilitar una exportaci\u00f3n est\u00e1tica en Next.js versi\u00f3n 13 o superior, cambia el modo output<\/code> dentro de next.config.js<\/strong>:<\/p>\n
        const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
        Ahora, cuando construyas tu proyecto, se espera que Next.js produzca una carpeta out<\/strong> que contenga los activos HTML<\/a>, CSS<\/a> y JavaScript<\/a> de tu aplicaci\u00f3n.<\/p>\n
        Desde la versi\u00f3n 13, Next.js soporta comenzar como un sitio est\u00e1tico y, posteriormente, actualizarlo de forma opcional para utilizar funciones que requieren un servidor. Cuando utilices funciones de servidor, la construcci\u00f3n de tus p\u00e1ginas no generar\u00e1 p\u00e1ginas est\u00e1ticas.<\/p>\n
        Por ejemplo, en la ruta din\u00e1mica, est\u00e1s obteniendo estos datos din\u00e1micamente. Necesitas poder generar todas las entradas est\u00e1ticamente. Esto se puede hacer utilizando la funci\u00f3n generateStaticParams<\/code>.<\/p>\n
        La funci\u00f3n se utiliza en combinaci\u00f3n con segmentos de rutas din\u00e1micas para generar rutas est\u00e1ticamente en el momento de la construcci\u00f3n, en lugar de hacerlo bajo demanda en el momento de la solicitud. Cuando construyes, generateStaticParams<\/code> se ejecuta antes de que se generen los dise\u00f1os o p\u00e1ginas correspondientes.<\/p>\n
        En [postID]\/page.js<\/strong>, utiliza la funci\u00f3n generateStaticParams<\/code> para obtener la ruta de todos los posts:<\/p>\n
        export async function generateStaticParams() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n\n    return posts.map((post) => ({\n        postId: post.id.toString(),\n    }));\n}<\/code><\/pre>\n
        Cuando ejecutes el comando de construcci\u00f3n, tu proyecto Next.js generar\u00e1 ahora un directorio out<\/strong>\u00a0con los archivos est\u00e1ticos.<\/p>\n
        Despliega Next.js en el alojamiento de sitios est\u00e1ticos de Kinsta<\/h3>\n
        Env\u00eda tu c\u00f3digo a tu proveedor Git preferido (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>). A continuaci\u00f3n, sigue estos pasos para desplegar tu sitio est\u00e1tico Next.js en Kinsta:<\/p>\n
          \n
        1. Inicia sesi\u00f3n o crea una cuenta para ver tu panel MyKinsta<\/a>.<\/li>\n
        2. Autoriza a Kinsta con tu proveedor de Git.<\/li>\n
        3. Haz clic en Sitios Est\u00e1ticos<\/strong> en la barra lateral izquierda y, a continuaci\u00f3n, en A\u00f1adir sitio<\/strong>.<\/li>\n
        4. Selecciona el repositorio y la rama desde la que deseas desplegar.<\/li>\n
        5. Asigna un nombre \u00fanico a tu sitio.<\/li>\n
        6. A\u00f1ade la configuraci\u00f3n de construcci\u00f3n en el siguiente formato:\n