{"id":11198,"date":"2023-08-23T17:04:30","date_gmt":"2023-08-23T17:04:30","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=blogs&#038;p=11198"},"modified":"2024-12-23T20:24:11","modified_gmt":"2024-12-23T20:24:11","slug":"headless-wordpress-next-js","status":"publish","type":"blogs","link":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/","title":{"rendered":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n"},"content":{"rendered":"\n<p>El sistema de gesti\u00f3n de contenidos m\u00e1s popular del mundo, WordPress, ha evolucionado m\u00e1s all\u00e1 de su reputaci\u00f3n como una plataforma s\u00f3lo para blogs. Se ha convertido en un CMS maduro que ha comenzado a incursionar en el territorio &#8220;headless&#8221; en los \u00faltimos a\u00f1os.<\/p>\n\n\n\n<p>Pero los CMSs &#8220;headless&#8221; necesitan un framework frontend para crear interfaces de usuario atractivas, entonces, \u00bfcu\u00e1l deber\u00edan elegir los desarrolladores de WordPress para sus sitios? En este art\u00edculo, exploraremos por qu\u00e9 Next.js es una opci\u00f3n excelente, por qu\u00e9 los desarrolladores deber\u00edan considerar usarlo para sus proyectos y c\u00f3mo configurarlo.<\/p>\n\n\n\n<p>Comencemos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es WordPress &#8220;headless&#8221;?<\/h2>\n\n\n\n<p><a href=\"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-when-should-you-use-it\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress headless<\/a> se refiere al uso de WordPress con una arquitectura &#8220;headless&#8221; en lugar de una tradicional monol\u00edtica. En una configuraci\u00f3n tradicional, el backend y el frontend de un sitio web se combinan en un \u00fanico 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\u00faan.<\/p>\n\n\n\n<p>Con una arquitectura &#8220;headless&#8221;, el backend y el frontend est\u00e1n separados. WordPress act\u00faa como el backend, mientras que una plataforma diferente muestra interfaces y contenido amigables para el usuario en el frontend. Tecnolog\u00edas populares de frontend como React, Angular y Gatsby son com\u00fanmente utilizadas para implementaciones de WordPress &#8220;headless&#8221;.<\/p>\n\n\n\n<p>Bajo este modelo, WordPress es un centro de contenido y expone una interfaz de programaci\u00f3n de aplicaciones (API) que permite a cualquier tecnolog\u00eda frontend acceder y mostrar el contenido.<\/p>\n\n\n\n<p>WordPress &#8220;headless&#8221; es un concepto relativamente nuevo pero est\u00e1 ganando atenci\u00f3n debido a sus potenciales ventajas sobre un modelo monol\u00edtico. Ofrece a los desarrolladores flexibilidad en la elecci\u00f3n de sus tecnolog\u00edas frontend y proporciona escalabilidad en la gesti\u00f3n de m\u00faltiples canales desde un \u00fanico backend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Next.js?<\/h2>\n\n\n\n<p><a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a> es un framework frontend de c\u00f3digo abierto basado en React. Los desarrolladores utilizan Next.js para crear aplicaciones modernas de React renderizadas por servidor a trav\u00e9s de varias funciones potentes que simplifican el desarrollo y ayudan a crear aplicaciones web de alto rendimiento.<\/p>\n\n\n\n<p>Next.js difiere del renderizado del lado del cliente que <a href=\"https:\/\/wcanvas.com\/es\/blog\/wordpress-vs-react-for-web-apps-which-one-should-you-choose\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a> implementa por defecto, proporcionando en su lugar renderizado del lado del servidor (SSR) y generaci\u00f3n de sitios est\u00e1ticos (SSG). <strong>SSR<\/strong> permite a los desarrolladores renderizar componentes de React en el servidor y enviar el HTML generado al cliente. <strong>SSG<\/strong> genera archivos HTML est\u00e1ticos en el tiempo de construcci\u00f3n, que generalmente se sirven a los clientes a trav\u00e9s de una red de entrega de contenidos (CDN).<\/p>\n\n\n\n<p>SSR y SSG son m\u00e1s r\u00e1pidos que el renderizado del lado del cliente porque evitan inicializar el c\u00f3digo de React en la m\u00e1quina del cliente, lo cual puede ralentizar los sitios web si muchos componentes est\u00e1n cargando en pantalla. Tambi\u00e9n ofrecen herramientas de SEO mucho mejores para los desarrolladores.<\/p>\n\n\n\n<p>Adem\u00e1s de la renderizaci\u00f3n del servidor y sus muchos beneficios, Next.js cuenta con m\u00faltiples caracter\u00edsticas que lo hacen una elecci\u00f3n excelente para los desarrolladores frontend, incluyendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Recarga de C\u00f3digo en Caliente (HCR). <\/strong>Las p\u00e1ginas se recargan autom\u00e1ticamente al guardar cambios.<\/li>\n\n<li><strong>Enrutamiento Autom\u00e1tico. <\/strong>Las URL se asignan a archivos en la carpeta de p\u00e1ginas sin configuraci\u00f3n adicional.<\/li>\n\n<li><strong>Componentes de un solo archivo. <\/strong>La biblioteca integrada <strong>styled-jsx<\/strong> permite un estilo f\u00e1cil y espec\u00edfico para cada componente.<\/li>\n\n<li><strong>Compatibilidad. <\/strong>Next.js es compatible con el resto de los ecosistemas de JavaScript, Node.js y React.<\/li>\n\n<li><strong>Divisi\u00f3n autom\u00e1tica de c\u00f3digo. <\/strong>Las p\u00e1ginas se dividen en recursos separados, cargando solo el JavaScript necesario por p\u00e1gina.<\/li>\n\n<li><strong>Prefetching. <\/strong>El componente <strong>Link<\/strong> admite el prefetching de recursos de p\u00e1gina en segundo plano.<\/li>\n\n<li><strong>Componentes din\u00e1micos. <\/strong>Los desarrolladores pueden importar din\u00e1micamente m\u00f3dulos JavaScript y componentes React.<\/li>\n\n<li><strong>Exportaciones est\u00e1ticas. <\/strong>Exporta un sitio completamente est\u00e1tico usando el comando <strong>next export<\/strong>.<\/li>\n\n<li><strong>Soporte para TypeScript. <\/strong>Next.js est\u00e1 escrito en TypeScript y ofrece un excelente soporte para TypeScript.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 usar Next.js como framework frontend para WordPress &#8220;headless&#8221;?<\/h2>\n\n\n\n<p>El modelo &#8220;headless&#8221; 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 &#8220;headless&#8221;, pero nuestros desarrolladores eligen Next.js porque ofrece algunas de las mejores caracter\u00edsticas de SEO entre cualquier framework disponible.<\/p>\n\n\n\n<p>La renderizaci\u00f3n del servidor, la capacidad de agregar etiquetas meta a la secci\u00f3n <strong>&lt;head&gt;<\/strong> del HTML y el seguimiento nativo de estad\u00edsticas SEO esenciales son algunos de los principales beneficios de SEO de Next.js. Sin embargo, el SEO no es la \u00fanica raz\u00f3n para elegir Next.js (aunque sigue siendo una raz\u00f3n importante). Otras razones por las que elegimos Next.js para el desarrollo &#8220;headless&#8221; incluyen las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next.js simplifica el desarrollo proporcionando herramientas y caracter\u00edsticas listas para usar que facilitan la creaci\u00f3n y el mantenimiento de aplicaciones frontend complejas sin preocuparse demasiado por el backend de WordPress.<\/li>\n\n<li>Next.js es un framework flexible que se integra perfectamente con las instalaciones de WordPress.<\/li>\n\n<li>Next.js tiene una gran comunidad que asegura que permanezca actualizado y mantenido. Pod\u00e9s confiar en Next.js para un soporte y estabilidad a largo plazo.<\/li>\n\n<li>Next.js es gratuito y de c\u00f3digo abierto, lo que lo hace extremadamente rentable.<\/li>\n\n<li>Cuando se optimizan adecuadamente, los sitios con Next.js tienen un alto rendimiento y brindan una excelente experiencia de usuario.<\/li>\n<\/ul>\n\n\n\n<p>En resumen, Next.js es una excelente elecci\u00f3n para construir sitios WordPress &#8220;headless&#8221; porque simplifica el desarrollo, se integra sin problemas con WordPress &#8220;headless&#8221;, cuenta con un fuerte apoyo de la comunidad, permite una gesti\u00f3n 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\u00e1micas, escalables y r\u00e1pidas. Y por eso utilizamos Next.js para nuestros proyectos de WordPress &#8220;headless&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo configurar un blog b\u00e1sico para WordPress &#8220;headless&#8221; usando Next.js y GraphQL<\/h2>\n\n\n\n<p>Ahora que sabemos qu\u00e9 es Next.js y c\u00f3mo beneficia a tu proyecto de WordPress &#8220;headless&#8221;, exploraremos c\u00f3mo configurar un blog b\u00e1sico para una instalaci\u00f3n de WordPress &#8220;headless&#8221; con Next.js y GraphQL. Para esta gu\u00eda, vas a necesitar lo siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Una instalaci\u00f3n de WordPress desplegada. Puede ser un sitio WordPress en vivo o una instalaci\u00f3n <a href=\"https:\/\/wcanvas.com\/es\/blog\/how-to-set-a-local-environment-to-work-locally-on-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Local<\/a>.<\/li>\n\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js 16.8<\/a> o una versi\u00f3n posterior.<\/li>\n\n<li>El plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-graphql\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL<\/a>.<\/li>\n\n<li>El repositorio de GitHub <a href=\"https:\/\/github.com\/colbyfayock\/next-wordpress-starter\" target=\"_blank\" rel=\"noreferrer noopener\">Next WordPress Starter<\/a>. Este proyecto se encarga de conectar con WordPress, conectar con la API GraphQL de WordPress, consultar los datos, crear la p\u00e1gina de inicio para el blog y la plantilla din\u00e1mica para cada publicaci\u00f3n individual del blog. Es un excelente punto de partida si sos nuevo en Next.js con WordPress &#8220;headless&#8221;.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 1: Instalar WordPress<\/h3>\n\n\n\n<p>Naturalmente, vas a necesitar una instalaci\u00f3n de WordPress que act\u00fae como el centro de contenido que tu frontend impulsado por Next.js mostrar\u00e1. Necesitar\u00e1s una instancia en vivo y desplegada de WordPress a la que puedas acceder en internet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 2: Instalar y activar WPGraphQL<\/h3>\n\n\n\n<p>Ve a <strong>Plugins<\/strong> &gt; <strong>A\u00f1adir Nuevo<\/strong> y busc\u00e1 el plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-graphql\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL<\/a>. Inst\u00e1lalo y act\u00edvalo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1-1024x623.jpg\" alt=\"captura de pantalla del plugin WPGraphQL en el directorio de plugins de WordPress\" class=\"wp-image-2888\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-1.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>GraphQL es un lenguaje de consulta de c\u00f3digo abierto creado por Meta en 2012, utilizado principalmente para crear APIs vers\u00e1tiles y eficientes, surgiendo como una alternativa a la arquitectura de la API REST, como la que WordPress usa por defecto. El plugin WPGraphQL ampl\u00eda la funcionalidad de WordPress al exponer sus datos y caracter\u00edsticas a trav\u00e9s de un punto final de GraphQL.&nbsp;<\/p>\n\n\n\n<p>Una vez activo, ver\u00e1s un bot\u00f3n de GraphQL en la barra lateral de tu panel de administraci\u00f3n. Desplaz\u00e1 el puntero sobre \u00e9l y hac\u00e9 clic en GraphiQL IDE. Esto te llevar\u00e1 al \u00e1rea de pruebas de GraphQL, donde pod\u00e9s escribir consultas a tu base de datos. En el \u00e1rea de pruebas, pod\u00e9s experimentar con consultas escribi\u00e9ndolas en el panel de la izquierda. Por ejemplo, el siguiente esquema consulta todos los t\u00edtulos de cada publicaci\u00f3n en tu sitio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">query postsQuery{\n&nbsp;&nbsp;posts{\n&nbsp;&nbsp;&nbsp;&nbsp;edges{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;}\n}<\/code><\/pre>\n\n\n\n<p>Ejecut\u00e1 la consulta haciendo clic en el bot\u00f3n \u201cPlay\u201d en la parte superior, y obtendr\u00e1s una respuesta como la siguiente en el panel derecho:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">{\n&nbsp;&nbsp;\"data\": {\n&nbsp;&nbsp;&nbsp;&nbsp;\"posts\": {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"edges\": [\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"node\": {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"title\": \"T\u00edtulo del Post 1\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"node\": {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"title\": \"T\u00edtulo del Post 2\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"node\": {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"title\": \"T\u00edtulo del Post 3\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;]\n&nbsp;&nbsp;}\n}<\/code><\/pre>\n\n\n\n<p>El contenido exacto de la respuesta depende de las publicaciones actuales en tu WordPress, pero obtener una respuesta exitosa significa que WPGraphQL est\u00e1 funcionando, y pod\u00e9s conectar tu backend de WordPress &#8220;headless&#8221; con cualquier framework moderno de frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 3: Clonar el repositorio inicial<\/h3>\n\n\n\n<p>Clon\u00e1 el repositorio <a href=\"https:\/\/github.com\/colbyfayock\/next-wordpress-starter\" target=\"_blank\" rel=\"noreferrer noopener\">Next WordPress Starter<\/a> desde la consola usando este comando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash line-numbers\">git clone https:\/\/github.com\/colbyfayock\/next-wordpress-starter<\/code><\/pre>\n\n\n\n<p>Para clonarlo desde Github Desktop, ve a <strong>A\u00f1adir\u2026<\/strong> &gt; <strong>Clonar Repositorio<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2-1024x623.jpg\" alt=\"captura de pantalla de GitHub Desktop mientras se clona un repositorio\" class=\"wp-image-2889\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-2.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Luego peg\u00e1 la URL del repositorio en la secci\u00f3n <strong>URL<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3-1024x623.jpg\" alt=\"captura de pantalla de GitHub Desktop mientras se pega la URL del repositorio\" class=\"wp-image-2890\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-3.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ahora abr\u00ed la carpeta en Visual Studio Code o tu editor de c\u00f3digo preferido. El proyecto contiene una configuraci\u00f3n de Next.js bastante est\u00e1ndar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4-1024x623.jpg\" alt=\"captura de pantalla de un proyecto Next.js en Visual Studio Code\" class=\"wp-image-2891\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-4.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Si explor\u00e1s el archivo <strong>package.json<\/strong>, notar\u00e1s la siguiente funci\u00f3n para soporte de Apollo, un popular cliente de GraphQL:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">\"@apollo\/client\": \"^3.7.14\"<\/code><\/pre>\n\n\n\n<p>Este proyecto utiliza el cliente Apollo GraphQL para enviar consultas a tu backend de WordPress. Sin embargo, vas a tener que a\u00f1adir una variable de entorno antes de poder empezar a enviar consultas y conectar exitosamente tu sitio WordPress con este proyecto de Next.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 4: A\u00f1adir la variable de entorno<\/h3>\n\n\n\n<p>A\u00f1ad\u00ed el archivo <strong>.env.local<\/strong> al directorio ra\u00edz de tu proyecto. <strong>.env.local<\/strong> es el archivo donde pod\u00e9s a\u00f1adir variables de entorno mientras prob\u00e1s en Next.js.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"623\" src=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5-1024x623.jpg\" alt=\"captura de pantalla del archivo env.local en Visual Studio Code\" class=\"wp-image-2892\" srcset=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5-1024x623.jpg 1024w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5-300x182.jpg 300w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5-768x467.jpg 768w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5-1536x934.jpg 1536w, https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/09\/headless-wordpress-and-next.js-5.jpg 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A\u00f1ad\u00ed el siguiente c\u00f3digo al nuevo archivo <strong>.env.local<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">WORDPRESS_GRAPHQL_ENDPOINT=http:\/\/wordpressite.com\/graphql<\/code><\/pre>\n\n\n\n<p>Este es el \u00fanico punto final de GraphQL que tu sitio de Next.js consumir\u00e1 para mostrar el contenido en el frontend. Sustitu\u00ed \u201cwordpressite.com\u201d con el nombre de dominio de tu sitio WordPress.<\/p>\n\n\n\n<p>Si est\u00e1s utilizando una instalaci\u00f3n Local, us\u00e1 la direcci\u00f3n local de tu sitio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"json\" class=\"language-json line-numbers\">WORDPRESS_GRAPHQL_ENDPOINT=http:\/\/wordpressite.local\/graphql<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 5: Instalar dependencias y ejecutar tu sitio<\/h3>\n\n\n\n<p>Ahora solo queda instalar las dependencias, y finalmente podr\u00e1s comenzar a gestionar tu sitio. Para instalar dependencias, ejecut\u00e1 el siguiente comando en la consola:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">npm install<\/code><\/pre>\n\n\n\n<p>Una vez que todas las dependencias est\u00e1n instaladas, escrib\u00ed el siguiente comando para ejecutar la aplicaci\u00f3n en modo de desarrollo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markdown\" class=\"language-markdown line-numbers\">npm run dev<\/code><\/pre>\n\n\n\n<p>Para ver tu sitio frontend de Next.js en acci\u00f3n, peg\u00e1 \u201chttp:\/\/localhost:3000\u201d en tu navegador, \u00a1y deber\u00edas poder experimentar tu sitio! A partir de este momento, cualquier cambio que realices en el backend de WordPress se reflejar\u00e1 en el frontend de Next.js.<\/p>\n\n\n\n<p>Sin embargo, record\u00e1 que necesitas ejecutar \u201cnpm run dev\u201d nuevamente cada vez que quieras ver los cambios, ya que necesit\u00e1s esperar a que el servidor local pase por otro proceso de construcci\u00f3n.<\/p>\n\n\n\n<p>\u00a1Ahora comenz\u00e1 a editar y gestionar tu sitio!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js te ayuda a desarrollar sitios WordPress &#8220;headless&#8221; r\u00e1pidos y flexibles<\/h2>\n\n\n\n<p>WordPress se ha transformado de una plataforma de blogs a un poderoso CMS que ahora puede impulsar arquitecturas &#8220;headless&#8221;. Entre los varios frameworks frontend disponibles, Next.js se destaca como una excelente elecci\u00f3n para desarrolladores.<\/p>\n\n\n\n<p>Next.js empodera a los desarrolladores para crear aplicaciones web din\u00e1micas, escalables y r\u00e1pidas con WordPress &#8220;headless&#8221;. Al aprovechar sus caracter\u00edsticas, 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 &#8220;headless&#8221; de WordPress.<\/p>\n\n\n\n<p>Esperamos que hayas encontrado \u00fatil esta gu\u00eda y ahora puedas comenzar a gestionar tu instalaci\u00f3n de WordPress &#8220;headless&#8221; utilizando Next.js como framework frontend. \u00a1Buena suerte!<\/p>\n\n\n\n<p>Para m\u00e1s gu\u00edas e informaci\u00f3n sobre WordPress, visit\u00e1 <a href=\"https:\/\/wcanvas.com\/es\/blogs\/\" target=\"_blank\" rel=\"noreferrer noopener\">nuestro blog<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El sistema de gesti\u00f3n de contenidos m\u00e1s popular del mundo, WordPress, ha evolucionado m\u00e1s all\u00e1 de su reputaci\u00f3n como una plataforma s\u00f3lo para blogs. Se ha convertido en un CMS maduro que ha comenzado a incursionar en el territorio &#8220;headless&#8221; en los \u00faltimos a\u00f1os. Pero los CMSs &#8220;headless&#8221; necesitan un framework frontend para crear interfaces [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3477,"template":"","blog-categories":[77],"class_list":["post-11198","blogs","type-blogs","status-publish","has-post-thumbnail","hentry","blog-categories-paso-a-paso"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas<\/title>\n<meta name=\"description\" content=\"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas\" \/>\n<meta property=\"og:description\" content=\"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"White Canvas\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-23T20:24:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": [\n\t                \"Article\",\n\t                \"BlogPosting\"\n\t            ],\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\"\n\t            },\n\t            \"author\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"url\": \"https:\/\/wcanvas.com\/\"\n\t            },\n\t            \"headline\": \"Headless WordPress y Next.js: beneficios y configuraci\u00f3n\",\n\t            \"datePublished\": \"2023-08-23T17:04:30+00:00\",\n\t            \"dateModified\": \"2024-12-23T20:24:11+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@type\": \"WebPage\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\"\n\t            },\n\t            \"wordCount\": 1983,\n\t            \"publisher\": {\n\t                \"@type\": \"Organization\",\n\t                \"name\": \"Wcanvas\",\n\t                \"logo\": {\n\t                    \"@type\": \"ImageObject\",\n\t                    \"url\": \"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png\"\n\t                }\n\t            },\n\t            \"image\": [],\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg\",\n\t            \"inLanguage\": \"es\",\n\t            \"description\": null\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\",\n\t            \"name\": \"Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg\",\n\t            \"datePublished\": \"2023-08-23T17:04:30+00:00\",\n\t            \"dateModified\": \"2024-12-23T20:24:11+00:00\",\n\t            \"description\": \"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"es\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"es\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage\",\n\t            \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg\",\n\t            \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg\",\n\t            \"width\": 1280,\n\t            \"height\": 720,\n\t            \"caption\": \"javascript code\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Blogs\",\n\t                    \"item\": \"https:\/\/wcanvas.com\/es\/blogs\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Headless WordPress y Next.js: beneficios y configuraci\u00f3n\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#website\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"name\": \"White Canvas\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/wcanvas.com\/es\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"es\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#organization\",\n\t            \"name\": \"White Canvas\",\n\t            \"url\": \"https:\/\/wcanvas.com\/es\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg\",\n\t                \"width\": 115,\n\t                \"height\": 32,\n\t                \"caption\": \"White Canvas\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/\"\n\t            },\n\t            \"alternateName\": \"Wcanvas\",\n\t            \"contactPoint\": [\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+1 (347) 688 2902\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"US\",\n\t                    \"availableLanguage\": \"en\"\n\t                },\n\t                {\n\t                    \"@type\": \"ContactPoint\",\n\t                    \"telephone\": \"+54 (11) 5236 4717\",\n\t                    \"contactType\": \"sales\",\n\t                    \"contactOption\": \"TollFree\",\n\t                    \"areaServed\": \"AR\",\n\t                    \"availableLanguage\": \"es\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198\",\n\t            \"name\": \"Nicolas Pisani\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"es\",\n\t                \"@id\": \"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"contentUrl\": \"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png\",\n\t                \"caption\": \"Nicolas Pisani\"\n\t            },\n\t            \"sameAs\": [\n\t                \"https:\/\/wcanvas.com\",\n\t                \"#\",\n\t                \"https:\/\/www.instagram.com\/whitecanvasteam\/\",\n\t                \"https:\/\/x.com\/wcanvas\"\n\t            ]\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas","description":"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/","og_locale":"es_ES","og_type":"article","og_title":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas","og_description":"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.","og_url":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/","og_site_name":"White Canvas","article_modified_time":"2024-12-23T20:24:11+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#article","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/"},"author":{"@type":"Organization","name":"Wcanvas","url":"https:\/\/wcanvas.com\/"},"headline":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n","datePublished":"2023-08-23T17:04:30+00:00","dateModified":"2024-12-23T20:24:11+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/"},"wordCount":1983,"publisher":{"@type":"Organization","name":"Wcanvas","logo":{"@type":"ImageObject","url":"https:\/\/wcanvas.com\/wp-content\/themes\/wcanvas\/assets\/img\/elements\/logo-white-white.png"}},"image":[],"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg","inLanguage":"es","description":null},{"@type":"WebPage","@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/","url":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/","name":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n - White Canvas","isPartOf":{"@id":"https:\/\/wcanvas.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage"},"image":{"@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg","datePublished":"2023-08-23T17:04:30+00:00","dateModified":"2024-12-23T20:24:11+00:00","description":"Aprend\u00e9 a aprovechar Next.js para crear sitios de headless WordPress que tengan buen SEO y alto rendimiento.","breadcrumb":{"@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#primaryimage","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/08\/headless-wordpress-and-next.js-HERO.jpg","width":1280,"height":720,"caption":"javascript code"},{"@type":"BreadcrumbList","@id":"https:\/\/wcanvas.com\/es\/blog\/headless-wordpress-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wcanvas.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blogs","item":"https:\/\/wcanvas.com\/es\/blogs\/"},{"@type":"ListItem","position":3,"name":"Headless WordPress y Next.js: beneficios y configuraci\u00f3n"}]},{"@type":"WebSite","@id":"https:\/\/wcanvas.com\/es\/#website","url":"https:\/\/wcanvas.com\/es\/","name":"White Canvas","description":"","publisher":{"@id":"https:\/\/wcanvas.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wcanvas.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/wcanvas.com\/es\/#organization","name":"White Canvas","url":"https:\/\/wcanvas.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2023\/01\/logowhitecanvas.svg","width":115,"height":32,"caption":"White Canvas"},"image":{"@id":"https:\/\/wcanvas.com\/es\/#\/schema\/logo\/image\/"},"alternateName":"Wcanvas","contactPoint":[{"@type":"ContactPoint","telephone":"+1 (347) 688 2902","contactType":"sales","contactOption":"TollFree","areaServed":"US","availableLanguage":"en"},{"@type":"ContactPoint","telephone":"+54 (11) 5236 4717","contactType":"sales","contactOption":"TollFree","areaServed":"AR","availableLanguage":"es"}]},{"@type":"Person","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/ea362f7fa9eb0239142e5e982bd8c198","name":"Nicolas Pisani","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/wcanvas.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","contentUrl":"https:\/\/wcanvas.com\/wp-content\/uploads\/2022\/12\/cropped-avatar-nico-96x96.png","caption":"Nicolas Pisani"},"sameAs":["https:\/\/wcanvas.com","#","https:\/\/www.instagram.com\/whitecanvasteam\/","https:\/\/x.com\/wcanvas"]}]}},"_links":{"self":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs\/11198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blogs"}],"about":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/types\/blogs"}],"author":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media\/3477"}],"wp:attachment":[{"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/media?parent=11198"}],"wp:term":[{"taxonomy":"blog-categories","embeddable":true,"href":"https:\/\/wcanvas.com\/es\/wp-json\/wp\/v2\/blog-categories?post=11198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}