{"id":36406,"date":"2024-12-06T07:00:00","date_gmt":"2024-12-06T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36406"},"modified":"2025-10-23T10:14:19","modified_gmt":"2025-10-23T17:14:19","slug":"build-masonry-gallery-next-js-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary","title":{"rendered":"How to Build a Masonry Gallery in Next.js With Cloudinary"},"content":{"rendered":"

A Masonry gallery layout is an elegant way to display images. Each item is arranged in a staggered grid, allowing for more creative space utilization. I\u2019ve always found this layout to be a great choice, especially for smaller collections of images because it makes the most of available space while keeping the presentation visually interesting.<\/p>\n

In this blog post, I\u2019ll show you how to create a simple Masonry gallery using Masonry js react in Next.js and Cloudinary to host and optimize the images.<\/p>\n

If you don\u2019t already have one, you can get a free-for-life Cloudinary account<\/a>. Cloudinary makes building a Masonry gallery super fast and easy (and lots more).<\/p>\n

We\u2019ll also use Tailwind CSS to handle the styling quickly and efficiently, keeping things simple but effective. By the end, you\u2019ll have a neat and responsive gallery layout that looks great with minimal effort.<\/p>\n

\"Image<\/p>\n

Setting Up the Project<\/h2>\n

To get started, I used the command npx create-next-app@latest<\/code> and followed the prompts. One of the nice things about this setup is that it already offers an option to include Tailwind CSS during the installation, so no need to set that up separately.<\/p>\n

Once the project was ready, I added the next-cloudinary package by running:<\/p>\n

npm install next-cloudinary\n<\/code><\/span><\/pre>\n
After that, I set the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME<\/code> environment variable in my .env.local<\/code> file so Cloudinary could adequately handle the image hosting. With that in place, I was ready to start building the Masonry gallery.<\/p>\n
Creating the Masonry Gallery Components<\/h2>\n
Now that the project setup is complete let\u2019s dive into building the components for the Masonry gallery. The gallery will consist of two main parts: MasonryGallery<\/code> and MasonryItem<\/code>, with a custom CldImage<\/code> component for optimized image delivery using Cloudinary.<\/p>\n
First, we\u2019ll create the MasonryGallery<\/code> and MasonryItem<\/code> components, here\u2019s the code for both in the Next.js React environment:<\/p>\n
import<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> \".\/index.css\"<\/span>;\nimport<\/span> CustomImage from<\/span> \"@\/components\/cloudinary-image\/CustomImage.client\"<\/span>;\n\nexport<\/span> function<\/span> MasonryGallery<\/span>({ children }: { children: React.ReactNode }<\/span>) <\/span>{\n  return<\/span> <div<\/span> className<\/span>=\"masonry-gallery my-4\"<\/span>><\/span>{children}<\/div<\/span>><\/span><\/span>;\n}\n\nexport<\/span> function<\/span> MasonryItem<\/span>({ src, alt }: { src: string; alt: string }<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>=\"masonry-item\"<\/span>><\/span>\n      <CustomImage<\/span> src<\/span>={src}<\/span> alt<\/span>={alt}<\/span> className<\/span>=\"rounded-lg\"<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The MasonryGallery<\/code> component wraps the gallery layout with simple styling using the masonry-gallery<\/code> class. The MasonryItem<\/code> component receives the image source and alt text as props and passes them to the CustomImage<\/code> component.<\/p>\n
Speaking of CustomImage<\/code>, this is where we use Cloudinary to optimize the image delivery:<\/p>\n
\"use client\"<\/span>;\nimport<\/span> { CldImage } from<\/span> \"next-cloudinary\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> CustomImage<\/span>({\n  src,\n  alt,\n  className = \"\"<\/span>,\n}: {\n  src: string;\n  alt: string;\n  className?: string;\n}<\/span>) <\/span>{\n  return<\/span> (\n    <CldImage<\/span>\n      src<\/span>={src}<\/span>\n      alt<\/span>={alt}<\/span>\n      width<\/span>=\"500\"<\/span>\n      height<\/span>=\"500\"<\/span>\n      crop<\/span>={{<\/span>\n        type:<\/span> \"auto<\/span>\",\n        source:<\/span> true<\/span>,\n      }}\n      className<\/span>={className}<\/span>\n    \/><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component leverages the CldImage<\/code> from next-cloudinary<\/code> to ensure images are delivered in the best format and quality for the user\u2019s device. I\u2019ve set the width and height to 500x500<\/code> for this example, and the auto<\/code> cropping ensures Cloudinary optimizes the images on the fly.<\/p>\n
Next, apply the CSS Grid layout logic to get that Masonry look. Here\u2019s the CSS for the gallery:<\/p>\n
.masonry-gallery {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-auto-rows: 1fr;\n  gap: 1rem;\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n.masonry-item {\n  grid-row: span 1;\n}\n\n.masonry-item:nth-child(1),\n.masonry-item:nth-child(5) {\n  grid-row: span 2;\n}\n<\/code><\/span><\/pre>\n
The key here is using CSS Grid to define a 2-column layout and controlling the row span dynamically based on the order of the images. Using the nth-child()<\/code> selector, I can make specific images take up more vertical space, giving the layout a staggered Masonry feel.<\/p>\n
Putting It All Together on the Home Page<\/h2>\n
Now that we\u2019ve set up the gallery components, it\u2019s time to put everything together in the home page. For this example, I\u2019m using some sample public images from Cloudinary, but in a real-world scenario, you\u2019d replace these with images from your Cloudinary account.<\/p>\n
Here\u2019s the code for the home page<\/code> component:<\/p>\n
import<\/span> {\n  MasonryGallery,\n  MasonryItem,\n} from<\/span> \"@\/components\/masonry-gallery\/MasonryGallery\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>=\"border-4 rounded-lg border-purple-500 p-8 max-w-screen-lg\"<\/span>><\/span>\n      <MasonryGallery<\/span>><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample\"<\/span> alt<\/span>=\"sample image 1\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-2\"<\/span> alt<\/span>=\"sample image 2\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-3\"<\/span> alt<\/span>=\"sample image 3\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-4\"<\/span> alt<\/span>=\"sample image 4\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-5\"<\/span> alt<\/span>=\"sample image 5\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample\"<\/span> alt<\/span>=\"sample image 1 again\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-2\"<\/span> alt<\/span>=\"sample image 2 again\"<\/span> \/><\/span>\n        <MasonryItem<\/span> src<\/span>=\"cld-sample-3\"<\/span> alt<\/span>=\"sample image 3 again\"<\/span> \/><\/span>\n      <\/MasonryGallery<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
I\u2019ve rendered the MasonryGallery<\/code> component on the page and used multiple MasonryItem<\/code> components, each pointing to a sample image from Cloudinary. The images are identified by their public IDs, such as cld-sample<\/code>, cld-sample-2<\/code>, and so on. These sample images are publicly available, but in an actual project, you\u2019d replace them with your image assets hosted on Cloudinary.<\/p>\n
You can customize the images by replacing the src<\/code> value with the public ID of any image from your Cloudinary account. For example, if you\u2019ve uploaded an image named my-awesome-image<\/code>, you\u2019d use it like this:<\/p>\n
<MasonryItem<\/span> src<\/span>=\"my-awesome-image\"<\/span> alt<\/span>=\"My awesome image\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This approach makes it easy to manage and optimize images hosted on Cloudinary, and they\u2019ll be delivered in the best possible format based on the user\u2019s device.<\/p>\n
Making the Masonry Gallery Responsive<\/h2>\n
To ensure the Masonry gallery looks great across different screen sizes, we can add a couple of media queries to adjust the number of columns and the row spans for particular images. Here\u2019s the updated CSS:<\/p>\n
@media<\/span> screen and<\/span> (min-width:<\/span> 640px<\/span>) {\n  .masonry-gallery<\/span> {\n    grid-template-columns<\/span>: repeat<\/span>(4<\/span>, 1<\/span>fr);\n  }\n\n  .masonry-item<\/span>:nth-child(6)<\/span>,\n  .masonry-item<\/span>:nth-child(7)<\/span> {\n    grid-row<\/span>: span 2<\/span>;\n  }\n}\n\n@media<\/span> screen and<\/span> (min-width:<\/span> 1024px<\/span>) {\n  .masonry-gallery<\/span> {\n    grid-template-columns<\/span>: repeat<\/span>(5<\/span>, 1<\/span>fr);\n  }\n\n  .masonry-item<\/span>:nth-child(6)<\/span>,\n  .masonry-item<\/span>:nth-child(7)<\/span> {\n    grid-row<\/span>: span 1<\/span>;\n  }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
With this simple addition, the gallery will adapt to different screen sizes.<\/p>\n
Phone View (Under 640px)<\/h3>\n
On small screens (less than 640px wide), the gallery will stack images in two columns.<\/p>\n
\"Image<\/p>\n
Tablet View (640px to 1024px)<\/h3>\n
On medium screens (640px to 1024px wide), it will display four columns, with the last two images taking up more vertical space.<\/p>\n
\"Image<\/p>\n
Desktop View (1024px and above)<\/h3>\n
On large screens (1024px and above), it will display five columns, with the last two images back to their normal span.<\/p>\n
\"Image<\/p>\n
Conclusion<\/h2>\n
And that\u2019s it! We\u2019ve built a responsive Masonry js React gallery using Next.js, Cloudinary, and Tailwind CSS in just a few steps. This layout is a creative way to display a small collection of images and maximize space.<\/p>\n
By leveraging Cloudinary<\/a> for image optimization and delivery, we ensure that our gallery performs well across different devices. Adding some simple responsive styles with Tailwind ensures the gallery adapts perfectly to any screen size.<\/p>\n
Feel free to take this example and tweak it to fit your needs \u2013 whether you decide to change the number of columns, using your Cloudinary images, or adding more custom styles. I hope this has inspired you to try out Masonry layouts in your projects and take advantage of how simple it can be to create one with these tools!<\/p>\n
If you found this blog post helpful and want to discuss it in more detail, head over to the Cloudinary Community forum<\/a> and its associated Discord<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":36411,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[370,212],"class_list":["post-36406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image","tag-next-js"],"acf":[],"yoast_head":"\nHow to Build a Masonry Gallery in Next.js With Cloudinary for Free<\/title>\n<meta name=\"description\" content=\"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.\" \/>\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-masonry-gallery-next-js-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Masonry Gallery in Next.js With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-06T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T17:14:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.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\/build-masonry-gallery-next-js-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How to Build a Masonry Gallery in Next.js With Cloudinary\",\"datePublished\":\"2024-12-06T15:00:00+00:00\",\"dateModified\":\"2025-10-23T17:14:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA\",\"keywords\":[\"Image\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\",\"name\":\"How to Build a Masonry Gallery in Next.js With Cloudinary for Free\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA\",\"datePublished\":\"2024-12-06T15:00:00+00:00\",\"dateModified\":\"2025-10-23T17:14:19+00:00\",\"description\":\"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing a next js masonry layout of pictures of coffee, coffee beans and coffee makers to be used in the masonry js react project\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Masonry Gallery in Next.js With 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\":\"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":"How to Build a Masonry Gallery in Next.js With Cloudinary for Free","description":"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.","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-masonry-gallery-next-js-cloudinary","og_locale":"en_US","og_type":"article","og_title":"How to Build a Masonry Gallery in Next.js With Cloudinary","og_description":"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.","og_url":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2024-12-06T15:00:00+00:00","article_modified_time":"2025-10-23T17:14:19+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.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\/build-masonry-gallery-next-js-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How to Build a Masonry Gallery in Next.js With Cloudinary","datePublished":"2024-12-06T15:00:00+00:00","dateModified":"2025-10-23T17:14:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA","keywords":["Image","Next.js"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary","url":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary","name":"How to Build a Masonry Gallery in Next.js With Cloudinary for Free","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA","datePublished":"2024-12-06T15:00:00+00:00","dateModified":"2025-10-23T17:14:19+00:00","description":"Learn how easy it is to create a Masonry gallery using Masonry js React in Next js with Cloudinary\u2019s free for life access.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing a next js masonry layout of pictures of coffee, coffee beans and coffee makers to be used in the masonry js react project"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/build-masonry-gallery-next-js-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build a Masonry Gallery in Next.js With 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":"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\/v1733182234\/Masonry_Gallery_in_NextJS\/Masonry_Gallery_in_NextJS.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36406","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=36406"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36406\/revisions"}],"predecessor-version":[{"id":38988,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36406\/revisions\/38988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36411"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}