{"id":28090,"date":"2022-06-10T07:39:45","date_gmt":"2022-06-10T07:39:45","guid":{"rendered":"http:\/\/create-a-pie-chart-in-nextjs"},"modified":"2025-10-23T10:10:32","modified_gmt":"2025-10-23T17:10:32","slug":"create-a-pie-chart-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs","title":{"rendered":"Create a Pie Chart in Next.js"},"content":{"rendered":"

The pie chart is one of the most effective ways of illustrating data and they have been around since the 1800s. A pie chart is a circular graph showing statistical information in numerical proportion. Pie charts are used widely in analyzing business and media data.<\/p>\n

At the end of the article, you will have understood how to implement a pie chart into your Next.js application. We\u2019ll show you how to use NPM chart.js<\/code> and chart.js react<\/code> to create and render pie charts. In the process we\u2019ll give you chart.js<\/code> examples to make it easier to code on your own.<\/p>\n

Prerequisites<\/h2>\n

A basic understanding of Next.js is needed to follow along with this article.<\/p>\n

Repository<\/h2>\n

You can find the complete code used in this article on GitHub:<\/p>\n

https:\/\/github.com\/folucode\/nextjs-pie-chart<\/a><\/p>\n

Sandbox<\/h2>\n

The completed project is on CodeSandbox. Fork it and run the code using the \u201cOpen Editor\u201d link in the sandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Project Setup<\/h2>\n

Node has to be installed on your computer to set up the Next.js application. To install Node, go to the Nodejs website<\/a> and follow the instructions to install the software compatible with your operating system.<\/p>\n

You can verify the Node.js installation by running the command below:<\/p>\n

node -v\nv16.10.0 \/\/node version installed\n<\/code><\/pre>\n
To create the Next.js app, run the command below. It will automatically set up a boilerplate Next.js app.<\/p>\n
npx<\/code> stands for Node Package Execute. It executes any package from the npm registry without installing it.<\/p>\n
npx create-next-app@latest <app-name>\n# or\nyarn create next-app <app-name>\n<\/code><\/pre>\n
After the installation is complete, change the directory into the app you just created:<\/p>\n
cd <app-name>\n<\/code><\/pre>\n
Run npm run dev<\/code> or yarn dev<\/code> to start the development server on http:\/\/localhost:3000<\/code>.<\/p>\n
\"Image<\/p>\n
Create Pie Chart With NPM chart.js<\/code> and chart.js react<\/code><\/h2>\n
You\u2019ll be using an npm<\/code> package called [Chart.js](https:\/\/www.npmjs.com\/package\/chart.js)<\/code> to create the pie chart in this application. Install it using the command below:<\/p>\n
$ npm i chart.js\n<\/code><\/pre>\n
After installation is complete, open the index.js<\/code> file in the pages folder and replace the boilerplate code with the code below:<\/p>\n
import Chart from 'chart.js\/auto';\nimport { useRef, useEffect } from 'react';\n\nexport default function Home() {\n  const canvas = useRef();\n\n  useEffect(() => {}, [])\n\n  return (\n    <div className='container'>\n      <canvas ref={canvas}><\/canvas>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
In the code above, the Chart.js<\/a> package is first imported. useRef<\/code> and useEffect<\/code> hooks are both imported from the react package. The useRef<\/code> hook creates a reference, and it is then assigned to the ref<\/code> property on the canvas<\/code> element. Subsequently, all the canvas<\/code> element\u2019s available properties and methods will be on the .current<\/code> property of the ref<\/code>.<\/p>\n
In the useEffect<\/code> hook, between the curly braces of the arrow function, paste the following code, which will take in a set of configurations and create the pie chart:<\/p>\n
import Chart from 'chart.js\/auto';\nimport { useRef, useEffect } from 'react';\nexport default function Home() {\n  ...\n  useEffect(() => {\n    const ctx = canvas.current;\n\n    let chartStatus = Chart.getChart('myChart');\n      if (chartStatus != undefined) {\n        chartStatus.destroy();\n    }\n\n    const chart = new Chart(ctx, {\n      type: 'pie',\n      data: {\n        labels: ['Lions', 'Monkeys', 'Zebras', 'Eagles', 'Horses'],\n        datasets: [\n          {\n            label: 'Dataset 1',\n            data: [12, 19, 3, 2, 3],\n            backgroundColor: [\n              'rgba(255, 99, 132, 0.2)',\n              'rgba(54, 162, 235, 0.2)',\n              'rgba(255, 206, 86, 0.2)',\n              'rgba(75, 192, 192, 0.2)',\n              'rgba(153, 102, 255, 0.2)',\n              'rgba(255, 159, 64, 0.2)',\n            ],\n            borderColor: [\n              'rgba(255, 99, 132, 1)',\n              'rgba(54, 162, 235, 1)',\n              'rgba(255, 206, 86, 1)',\n              'rgba(75, 192, 192, 1)',\n              'rgba(153, 102, 255, 1)',\n              'rgba(255, 159, 64, 1)',\n            ],\n            borderWidth: 1,\n          },\n        ],\n      },\n      options: {\n        responsive: true,\n        plugins: {\n          legend: {\n            position: 'top',\n          },\n          title: {\n            display: true,\n            text: 'Number of animals in the zoo',\n          },\n        },\n      },\n    });\n  }, []);\n  ...\n}\n<\/code><\/pre>\n
    \n
  1. The canvas<\/code> element is assigned to a variable called ctx<\/code>. A check is done to ensure a Chart hasn\u2019t been created already. If a Chart already exists, it is then destroyed to create a new Chart. If the previous one isn\u2019t destroyed, it will prevent the initialization and creation of a new Chart object.<\/li>\n
  2. A new Chart object is then initialized, which takes in two parameters, the canvas element you want to render the chart on and a set of configurations for how the pie chart will display. The chart type is set to \u2018pie\u2019 in the configuration object.<\/li>\n
  3. There is a data<\/code> property where several other configs are set, including labels for the chart, datasets used to define the specific data to be shown, and the background color to distinguish one dataset from another. It also contains a border-color property and border width to set the border\u2019s thickness.<\/li>\n
  4. There is an options<\/code> object to define the responsiveness of the chart, it\u2019s positioning, and title.<\/li>\n<\/ol>\n
    Rendering the Pie Chart<\/h1>\n
    In the globals.css<\/code> file in the styles folder, replace the boilerplate code with the code below:<\/p>\n
    html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\n.container {\n  position: relative;\n  margin: auto;\n  height: 50vh;\n  width: 50vw;\n}\n<\/code><\/pre>\n
    This code above aligns the parent container of the canvas<\/code> element to the center of the page.<\/p>\n
    After successfully following the steps above, run the command below in your terminal:<\/p>\n
     $ npm run dev\n<\/code><\/pre>\n
    The above command will spin up a development server on http:\/\/localhost:3000<\/a>, which you can use to view the application. See the outcome below as one of the key chart.js examples:<\/p>\n
    \"\"<\/p>\n
    You can hover over the pie sections to get more information about each section.<\/p>\n
    Conclusion<\/h2>\n
    This article showed you code and image chart.js examples on how to create pie charts in Next.js applications using NPM chart.js<\/code> and chart.js<\/code> react.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28091,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[145,177,212],"class_list":["post-28090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-html5","tag-javascript","tag-next-js"],"acf":[],"yoast_head":"\nNext.js Pie Chart | Create a Pie Chart in Next.js<\/title>\n<meta name=\"description\" content=\"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Pie Chart in Next.js\" \/>\n<meta property=\"og:description\" content=\"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T07:39:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T17:10:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Pie Chart in Next.js\",\"datePublished\":\"2022-06-10T07:39:45+00:00\",\"dateModified\":\"2025-10-23T17:10:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA\",\"keywords\":[\"HTML5\",\"Javascript\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\",\"url\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\",\"name\":\"Next.js Pie Chart | Create a Pie Chart in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA\",\"datePublished\":\"2022-06-10T07:39:45+00:00\",\"dateModified\":\"2025-10-23T17:10:32+00:00\",\"description\":\"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA\",\"width\":2560,\"height\":1440,\"caption\":\"Image showing a pie chart labeled create a pie chart in next.js for the chart.js examples article\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Pie Chart in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next.js Pie Chart | Create a Pie Chart in Next.js","description":"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.","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:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs","og_locale":"en_US","og_type":"article","og_title":"Create a Pie Chart in Next.js","og_description":"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.","og_url":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T07:39:45+00:00","article_modified_time":"2025-10-23T17:10:32+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs"},"author":{"name":"","@id":""},"headline":"Create a Pie Chart in Next.js","datePublished":"2022-06-10T07:39:45+00:00","dateModified":"2025-10-23T17:10:32+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","keywords":["HTML5","Javascript","Next.js"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs","url":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs","name":"Next.js Pie Chart | Create a Pie Chart in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","datePublished":"2022-06-10T07:39:45+00:00","dateModified":"2025-10-23T17:10:32+00:00","description":"In this article, you\u2019ll learn the details on how to create and render a Nextjs pie chart using chart.js React and NPM chart.js including chart.js examples.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","width":2560,"height":1440,"caption":"Image showing a pie chart labeled create a pie chart in next.js for the chart.js examples article"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/create-a-pie-chart-in-nextjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Pie Chart in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925428\/Web_Assets\/blog\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b\/efd1cfe9067aa245189700bda16d0bac16415edb-2560x1440-1_280914720b.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28090"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28090\/revisions"}],"predecessor-version":[{"id":38986,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28090\/revisions\/38986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28091"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}