{"id":32694,"date":"2024-01-18T07:00:00","date_gmt":"2024-01-18T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32694"},"modified":"2025-04-16T13:02:10","modified_gmt":"2025-04-16T20:02:10","slug":"image-showcase-next-cloudinary-library-next-js-14","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14","title":{"rendered":"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/next.cloudinary.dev\/\">Next Cloudinary library<\/a>, created and maintained by <a href=\"https:\/\/colbyfayock.com\/\">my good friend Colby Fayock<\/a>, allows you to easily use components out of the box within the library with these features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatically optimize images and videos and deliver in modern formats.<\/li>\n\n\n\n<li>Remove backgrounds from images.<\/li>\n\n\n\n<li>Dynamically add image and text overlays to images and videos.<\/li>\n\n\n\n<li>Use AI to crop and resize images and videos.<\/li>\n\n\n\n<li>Transform images and videos using color and effects.<\/li>\n\n\n\n<li>Generate Open Graph Social Media cards on the fly.<\/li>\n\n\n\n<li>Drop-in Upload widget.<\/li>\n<\/ul>\n\n\n\n<p>In this blog post, we\u2019ll create a simple image showcase and focus on the usage of the library with Next.js 14. The components we\u2019ll use are CldImage and CldVideoPlayer. If you want more details on the other components, please refer to the <a href=\"https:\/\/next.cloudinary.dev\/\">docs<\/a> and <a href=\"https:\/\/www.youtube.com\/colbyfayock\">Colby\u2019s YouTube channel<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>You\u2019ll need foundational knowledge of the <a href=\"https:\/\/cloudinary.com\/\">Cloudinary platform<\/a>, <a href=\"https:\/\/nextjs.org\/docs\">Next.js 14<\/a>, and <a href=\"https:\/\/nodejs.org\/en\">Node.js<\/a>. For an introductory tutorial, please refer to the Cloudinary and Next.js 14 documentation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Next Cloudinary Library<\/h2>\n\n\n\n<p>The Next Cloudinary Library is a high-performance solution tailored for image and video delivery and uploading in Next.js applications, leveraging the power of Cloudinary. This library facilitates automatic optimization of images and videos, delivering them in modern formats optimized for efficiency and speed. It includes features that allow for dynamic transformations, such as background removal, image and text overlays, AI-based cropping and resizing, and applying various color and effect filters.<\/p>\n\n\n\n<p>In addition to these features, the library offers the ability to generate Open Graph Social Media cards dynamically, a drop-in Upload widget for easy integration, and comprehensive customization options to tailor the media delivery to specific requirements. It supports the latest versions of Next.js, including 13 and 14, with full support in the <code>src<\/code> directory, and provides components that are marked as Client Components when used in the <code>app<\/code> directory.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p>Let\u2019s start by installing the Next Cloudinary library. Go to your terminal, and after installing a new Next.js 14 project, run <code>npm install next-cloudinary<\/code> in your Next.js project directory.<\/p>\n\n\n\n<p>Once installed, you\u2019ll need to configure your Cloudinary environment. Create a <code>.env.local<\/code> file in your Next.js 14 project and add this key and value:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\"<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Your<\/span> <span class=\"hljs-attr\">Cloud<\/span> <span class=\"hljs-attr\">Name<\/span>&gt;<\/span>\"<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you want to follow along step by step and surpass the boilerplate setup spinning up a new Next.js 14 app, you can <a href=\"https:\/\/github.com\/Fran-A-Dev\/next14-cloudinary-library\">clone down my repo here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Next.js 14<\/h3>\n\n\n\n<p>Next.js 14 provides a new, fundamental way to build Next.js apps with the App Router (<code>\/app directory<\/code>). Part of that includes using React.js technology such as server components that have different requirements when bundling applications.<\/p>\n\n\n\n<p>Using Next Cloudinary in the app directory currently requires marking the parent page or component as a Client Component. The directive for this would be placed at the top of the file like so: <code>\u201cuse client\u201d<\/code>.&nbsp;<\/p>\n\n\n\n<p>This is due to the split of components in two types: Client Components and Server Components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cloudinary Wrapper Component<\/h3>\n\n\n\n<p>We\u2019ll avoid making the entire page a Client Component. To do this, go to the root of your app folder and create a components folder. In this components folder, create a&nbsp;<code>CloudinaryWrapper.jsx<\/code> file and copy and paste in this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-string\">\"use client\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { CldImage <span class=\"hljs-keyword\">as<\/span> CldImageDefault } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next-cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> CldImage = <span class=\"hljs-function\">(<span class=\"hljs-params\">props<\/span>) =&gt;<\/span> {\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImageDefault<\/span> {<span class=\"hljs-attr\">...props<\/span>} \/&gt;<\/span><\/span>;\n\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> CldImage;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>What this component is doing is taking the <code>CldImage<\/code> component and renaming it to <code>CldImageDefault<\/code> from the <code>next-cloudinary<\/code> package. Then it takes a functional component named <code>CldImage<\/code> that takes the props as the argument.&nbsp;&nbsp;<\/p>\n\n\n\n<p>After that it returns and renders the <code>CldImageDefault<\/code> component and spreads the props received from <code>CldImage<\/code>. This will act as our wrapper and now we can call the component anything we want and use it across our app. In this case, we called it <code>CloudinaryWrapper.jsx<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cloudinary Video Player Component<\/h3>\n\n\n\n<p>The next thing we want to do is create a video image component. In the <code>components<\/code> directory we put the image wrapper in, add a file called <code>CldVideo.jsx<\/code>. Then copy and paste this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-string\">\"use client\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { CldVideoPlayer } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next-cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"next-cloudinary\/dist\/cld-video-player.css\"<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">CldVideo<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mx-auto max-w-md\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1900\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"Golden_Gate_Bridge__SaveYouTube_com__nlefau\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"w-full h-auto rounded-lg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> CldVideo;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This component is importing the <code>CldVideoPlayer<\/code> from the <code>next-cloudinary<\/code> library and applying the <code>css<\/code> necessary for the video player at the top of the file.<br><br>Next, we have a functional component named <code>CldVideo<\/code> that will render and return the video player on the page with the props that are passed to it: the source, width, and height. I also added some rounding with Tailwind. In this case, I\u2019ll use a video of the Golden Gate Bridge. You can pass in whatever the value of your <code>src<\/code> is.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next.js 14 Links and Routes<\/h2>\n\n\n\n<p>Before we see what our images and videos look like on the browser, let\u2019s make some client-side links to navigate users to the different images and the video we\u2019ll create to their individual routes and pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page Routes<\/h3>\n\n\n\n<p>The new approach in Next.js 14 is called route segmentation.<\/p>\n\n\n\n<p>Let\u2019s create three pages. One to show a cartoon effect of an image (a home page of a default image), an image without a background, and a video player page.<\/p>\n\n\n\n<p>In the root of the app folder, create these three folders separately:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>app\/cartoonify<\/code>&nbsp;<\/li>\n\n\n\n<li><code>app\/removebg<\/code><\/li>\n\n\n\n<li><code>app\/video<\/code><\/li>\n<\/ul>\n\n\n\n<p>Following that, on each individual folder, create a file called <code>page.jsx<\/code>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Cloudinary supports a <a href=\"https:\/\/next.cloudinary.dev\/cldimage\/examples#filters--effects\">wide variety of effects and artistic filters<\/a>. All we need to do is pass in the respective prop. Stoked! Let\u2019s use these props in our components to change the appearance of our images. We\u2019ll use the two props, <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_cartoonify\">cartoonify<\/a> and <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_background_removal\">removeBackground<\/a>, because I think they look the coolest.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cartoonify Prop<\/h4>\n\n\n\n<p>In the <code>app\/cartoonify\/page.jsx<\/code> file, add this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> CloudinaryWrapper <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/cloudinarywrapper\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex min-h-screen flex-col items-center justify-between p-24\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Cartoonify <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryWrapper<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">cartoonify<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"900\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"500\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/dxrwygxse\/image\/upload\/v1695311368\/reindeer.jpg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"100vw\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Cartoon\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"rounded-lg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">removeBackground Prop<\/h4>\n\n\n\n<p>In the <code>app\/removebg\/page.jsx<\/code> file, add this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> CloudinaryWrapper <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/cloudinarywrapper\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex min-h-screen flex-col items-center justify-between p-24\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>No BackGround <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryWrapper<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">removeBackground<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"900\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"500\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/dxrwygxse\/image\/upload\/v1695311368\/reindeer.jpg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"100vw\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"no background reindeer\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"rounded-lg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Both the cartoonify and no background pages are utilizing effects by taking in the Cloudinary props to alter the image.<\/p>\n\n\n\n<p>We\u2019re also taking advantage of the CldImage support of passing in a fully qualified Cloudinary URL as the <code>src<\/code>, which includes the version number to be correctly parsed on these pages.<\/p>\n\n\n\n<p>In the <code>app\/video\/page.jsx<\/code> file, add this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> CldVideo <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/CldVideo\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Video<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideo<\/span> \/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>On the last page, we\u2019ll need to add code to our home page, which is located in <code>app\/page.jsx<\/code> and was already created for us with the boilerplate code. This acts as the home page and regular image version of our <a href=\"https:\/\/cloudinary.com\/products\/image\">Cloudinary image<\/a>. Add this code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> CloudinaryWrapper <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/components\/cloudinarywrapper\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex min-h-screen flex-col items-center justify-between p-24\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Regular Image <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CloudinaryWrapper<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"900\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"500\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/dxrwygxse\/image\/upload\/v1695311368\/reindeer.jpg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"100vw\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Regular Reindeer Image\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"rounded-lg\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>All four page files are taking in the components we created as imports, and these will be the page components responsible for rendering the images and video on the page.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Next\/Link<\/h3>\n\n\n\n<p>Lastly, let&#8217;s create a navbar so the user can navigate to the individual pages with client-side routing.&nbsp;&nbsp;<\/p>\n\n\n\n<p>In the components folder, create a file called <code>Navbar.jsx<\/code>. Copy and paste this code block:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> Link <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/link\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Navbar<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center py-4\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mb-4\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Fran<span class=\"hljs-symbol\">&amp;apos;<\/span>s Next.js 14 with Next Cloudinary Example\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex justify-center space-x-4\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/cartoonify\"<\/span>&gt;<\/span>Cartoonify<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/\"<\/span>&gt;<\/span>Regular Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/removebg\"<\/span>&gt;<\/span>No Background<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/video\"<\/span>&gt;<\/span>Video Player<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Link<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is a navbar component that links the user to each of the routes and pages we created.<\/p>\n\n\n\n<p>To add the navbar globally, import and add it to your <code>layout.jsx<\/code> file at the root of the app folder like so:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Inter } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/font\/google\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/globals.css\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> Navbar <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/components\/Navbar\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> metadata = {\n\n\u00a0\u00a0<span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Create Next App\"<\/span>,\n\n\u00a0\u00a0<span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Generated by create next app\"<\/span>,\n\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">RootLayout<\/span>(<span class=\"hljs-params\">{ children }<\/span>) <\/span>{\n\n\u00a0\u00a0<span class=\"hljs-keyword\">return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Navbar<\/span> \/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">textAlign:<\/span> \"<span class=\"hljs-attr\">center<\/span>\", <span class=\"hljs-attr\">marginTop:<\/span> \"<span class=\"hljs-attr\">20px<\/span>\", <span class=\"hljs-attr\">fontSize:<\/span> \"<span class=\"hljs-attr\">14px<\/span>\" }}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a9 2023 Fran Agulto Dev Stoke\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span>\n\n\u00a0\u00a0);\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Your folder and file structure should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/NnGkblKRKhjdk2D41o9TtTtbN3st-EAJPrfTnZNYxJd9SkOAKe5rarum-rJWp9pRBL_LMzEcU6bJss80f5Hd_7vR9a_4-y0C0pVWYleyf7D76dFgoZiGzAdpRi77Z2zKaH4SeumQLOOp3Wuo5WFkqOI\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, go to your terminal and <code>run npm run dev<\/code> to start up the development server. Go to your browser to <code>localhost:3000<\/code> and you should see the images, effects, pages, and video we created:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/2kEUgSd3jW5o7g0r-aVcRo1OdxmMOzLoqlXjfuw5bq92S2v3OelQN6hPhCyWYPNQ3nXJMZszxvz9qJALf22RmBfFjcMZjVQhuR9p-X5L14VbePRYGXwQpuNctepyrWHxg_hX4h13NBInVLfn0ESg62w\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Regular image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/335WDsywxuMO_u7oMcCnohqrFsIYqX_ibY9VgntAj1gAgSS3bG4IPBuz3DWbpzI1MWf1xwc4pVdM0UDcsdKAdBhv64NilsrAhKP9aqtpOZqLjy2jLHj9RgQD4f0r1vQk29gxLq_dcF5JXC2R-fTD340\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Cartoonify image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/OgUk_7UNQ5Mrnz-AulVpCf1OuaBweesqJHDZv-4tuAe3MQc9B9tS2KO1WtGRKWFPzSIkV1Jj1JtgLG4nmWbTBsiyiv2xX3K25Sv6c6tn1Yha3da2tRdBCUCxHlbKtmUvpqBvK1u1UTpL-aOE-Ewl9mU\" alt=\"\"\/><figcaption class=\"wp-element-caption\">No background<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/auSwvaltMp5RWnprXPhDHEeF83GxHtEp2lss9vBrvjSgFWvW51RWqZafp3jGixh4umak4K3uRjjNFUV_1JGsll8xjJ5_-qcnc2edC6APUwcUmEyr6D73kt_UGswZPqhIJOCSVjXDQSreHqTTh4BLK5o\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Video player<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>I hope this blog post showed you a new way to optimize your images with the Next Cloudinary library. If you want a video form of this content that uses headless WordPress as the content database for these images, check out the <a href=\"https:\/\/www.youtube.com\/watch?v=64-fYmzSP00&amp;t=1866s\">event Colby and I did here<\/a>.<\/p>\n\n\n\n<p>As always, I look forward to seeing what you build out there on the web and if you have any feedback, please share in the <a href=\"https:\/\/community.cloudinary.com\/\">Cloudinary Community forums<\/a> or the associated <a href=\"https:\/\/discord.gg\/cloudinary\">Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Next Cloudinary library, created and maintained by my good friend Colby Fayock, allows you to easily use components out of the box within the library with these features: In this blog post, we\u2019ll create a simple image showcase and focus on the usage of the library with Next.js 14. The components we\u2019ll use are [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32696,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,212,328],"class_list":["post-32694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-next-js","tag-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create an Image Showcase With Next Cloudinary Library and Next.js 14<\/title>\n<meta name=\"description\" content=\"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.\" \/>\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\/image-showcase-next-cloudinary-library-next-js-14\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14\" \/>\n<meta property=\"og:description\" content=\"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T20:02:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog-jpg?_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\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/image-showcase-next-cloudinary-library-next-js-14#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14\",\"datePublished\":\"2024-01-18T15:00:00+00:00\",\"dateModified\":\"2025-04-16T20:02:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\"},\"wordCount\":1244,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Next.js\",\"WordPress\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\",\"url\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\",\"name\":\"Create an Image Showcase With Next Cloudinary Library and Next.js 14\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA\",\"datePublished\":\"2024-01-18T15:00:00+00:00\",\"dateModified\":\"2025-04-16T20:02:10+00:00\",\"description\":\"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create an Image Showcase With Next Cloudinary Library and Next.js 14","description":"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.","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\/image-showcase-next-cloudinary-library-next-js-14","og_locale":"en_US","og_type":"article","og_title":"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14","og_description":"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.","og_url":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14","og_site_name":"Cloudinary Blog","article_published_time":"2024-01-18T15:00:00+00:00","article_modified_time":"2025-04-16T20:02:10+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14","datePublished":"2024-01-18T15:00:00+00:00","dateModified":"2025-04-16T20:02:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14"},"wordCount":1244,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA","keywords":["Guest Post","Next.js","WordPress"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14","url":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14","name":"Create an Image Showcase With Next Cloudinary Library and Next.js 14","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA","datePublished":"2024-01-18T15:00:00+00:00","dateModified":"2025-04-16T20:02:10+00:00","description":"Learn how to create an image showcase with a focus on the usage of the library and Next.js 14. The components: CldImage and CldVideoPlayer.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/image-showcase-next-cloudinary-library-next-js-14#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Simple Image Showcase With Next Cloudinary Library and Next.js 14"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101419\/Create_simple_Image_Show_Case-Blog\/Create_simple_Image_Show_Case-Blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32694","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32694"}],"version-history":[{"count":7,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32694\/revisions"}],"predecessor-version":[{"id":37443,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32694\/revisions\/37443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32696"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}