{"id":25572,"date":"2022-11-15T13:29:00","date_gmt":"2022-11-15T20:29:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=25572"},"modified":"2022-11-15T14:28:46","modified_gmt":"2022-11-15T21:28:46","slug":"build-performant-engaging-experiences-in-next-js-with-next-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary","title":{"rendered":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary"},"content":{"rendered":"\n

Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt engagement and make your visitors unhappy.<\/p>\n\n\n\n

Fortunately, there are tools like Next.js that allow those teams to build web apps with performance in mind.  Which is great, but, where does a dev go for high-scale image delivery and management in those Next.js apps?<\/p>\n\n\n\n

Next Cloudinary<\/strong><\/h2>\n\n\n\n

Next Cloudinary<\/a> gives developers first-class support for using Cloudinary in Next.js applications. Delivering images at scale with automatic optimization, on-the-fly transformations, and the ability to add drop-in uploading can now be done with the Cloudinary Upload Widget<\/a>.<\/p>\n\n\n\n

\"Code
Dynamically cropping and resizing with text overlays<\/figcaption><\/figure>\n\n\n\n

Using Next Cloudinary, you can feel confident you’re building performant experiences with images, letting Cloudinary do the hard work behind the scenes.<\/p>\n\n\n

Note:<\/strong>

Next Cloudinary is a community integration<\/a> supported by the Cloudinary Developer Relations team and the broader community through open source<\/a>.<\/p>\n<\/div>\n\n\n

How Next Cloudinary Works<\/strong><\/h2>\n\n\n\n

At its core, Next Cloudinary offers a CldImage<\/a> component that wraps and extends the Next.js Image<\/a> component, giving you the same developer experience you expect from Next.js, while providing the features and performance you love from Cloudinary.<\/p>\n\n\n\n

The component passes in a custom Loader function to the Image component, which uses the Image props to build Cloudinary URLs, along with allowing additional props to control any transformations like background removal<\/a>.<\/p>\n\n\n\n

We take the CldImage component further with CldOgImage<\/a>, which generates an Open Graph Social Media Card using the same API as CldImage. It works by using the Next.js Head component to lift custom meta tags into the document’s <head>.<\/p>\n\n\n\n

\"Generating
Next Cloudinary Social Media Card<\/a><\/figcaption><\/figure>\n\n\n\n

Finally, to make uploading easy for everyone, the CldUploadButton<\/a> and CldUploadWidget<\/a> components use the existing Cloudinary Upload Widget, built with a friendly React API and Next.js tools like the Script<\/a> component.<\/p>\n\n\n\n

All this keeps you productive and helps to build a great experience for your visitors.<\/p>\n\n\n\n

Using Next Cloudinary<\/strong><\/h2>\n\n\n\n

To get started, install Next Cloudinary with your favorite package manager:<\/p>\n\n\n

yarn add next-cloudinary\n#<\/span> or<\/span>\nnpm install next-cloudinary<\/code><\/span>Code language:<\/span> Shell Session<\/span> (<\/span>shell<\/span>)<\/span><\/small><\/pre>\n\n\n
To ensure you’re delivering images from your Cloudinary account, add a new environment variable to your .env.local or CI:<\/p>\n\n\n
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"<Your Cloud Name>\"<\/code><\/span>Code language:<\/span> Shell Session<\/span> (<\/span>shell<\/span>)<\/span><\/small><\/pre>\n\n\n
Once ready, import the component that you wish to use, like the CldImage component, with:<\/p>\n\n\n
import<\/span> { CldImage } from<\/span> 'next-cloudinary'<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
And drop it in your project:<\/p>\n\n\n
<CldImage\n  width=\"600\"<\/span>\n  height=\"600\"<\/span> \n  src=\"<PublicID>\"<\/span>\n  alt=\"My Image\"<\/span>\n\/><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Learn More & Get Started<\/strong><\/h2>\n\n\n\n
To learn more about what components, APIs, and features are available, head over to the Next Cloudinary Docs<\/a>.
For bugs, issues, or feature requests, find Next Cloudinary on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt engagement and make your visitors unhappy. Fortunately, there are tools like Next.js that allow those teams to build web apps with performance in mind.  Which is great, but, where does […]<\/p>\n","protected":false},"author":54,"featured_media":25643,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[212],"class_list":["post-25572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-next-js"],"acf":[],"yoast_head":"\nBuild Performant, Engaging Experiences in Next.js with Next Cloudinary<\/title>\n<meta name=\"description\" content=\"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt\" \/>\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\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Performant, Engaging Experiences in Next.js with Next Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-15T20:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-15T21:28:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\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\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build Performant, Engaging Experiences in Next.js with Next Cloudinary\",\"datePublished\":\"2022-11-15T20:29:00+00:00\",\"dateModified\":\"2022-11-15T21:28:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\"},\"wordCount\":412,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA\",\"keywords\":[\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\",\"name\":\"Build Performant, Engaging Experiences in Next.js with Next Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA\",\"datePublished\":\"2022-11-15T20:29:00+00:00\",\"dateModified\":\"2022-11-15T21:28:46+00:00\",\"description\":\"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Performant, Engaging Experiences in Next.js with Next Cloudinary\"}]},{\"@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":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary","description":"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt","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\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary","og_description":"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt","og_url":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2022-11-15T20:29:00+00:00","article_modified_time":"2022-11-15T21:28:46+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary"},"author":{"name":"","@id":""},"headline":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary","datePublished":"2022-11-15T20:29:00+00:00","dateModified":"2022-11-15T21:28:46+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary"},"wordCount":412,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA","keywords":["Next.js"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary","url":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary","name":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA","datePublished":"2022-11-15T20:29:00+00:00","dateModified":"2022-11-15T21:28:46+00:00","description":"Building web and mobile apps requires teams to constantly analyze the requests being made and what can be done to avoid slow-loading pages which hurt","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/build-performant-engaging-experiences-in-next-js-with-next-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Performant, Engaging Experiences in Next.js with Next Cloudinary"}]},{"@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\/v1667540784\/Cld_Blog_FeatImg_Nov2k22_NextJS\/Cld_Blog_FeatImg_Nov2k22_NextJS.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25572","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\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=25572"}],"version-history":[{"count":9,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25572\/revisions"}],"predecessor-version":[{"id":25697,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25572\/revisions\/25697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/25643"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=25572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=25572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=25572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}