Display Cloudinary Images in a Gallery with Next.js & React

Learn how to use the Cloudinary API to show all Cloudinary image resources in a Next.js React app. We'll walk through using the Admin API to fetch and search for all of our resources, requesting only the root directory images and images for individual folders, and how we can abstract logic into a serverless function API endpoint.

🧐 What's Inside

00:00 - Intro
00:16 - What tools we'll be using including Cloudinary and Next.js
01:11 - Creating a new Next.js Image Gallery app from a demo starer
02:18 - Using the Admin Resources API to fetch all Cloudinary image resources with an authenticated request
10:15 - Requesting the next page of results with abstracted requests and creating a serverless function API endpoint
20:27 - Adding a load more button to update page state with new images and next page cursor
24:23 - Requesting only root directory images with the Resources Search API
26:26 - Using Folders API to show folders and request images from folder
32:04 - What else can we do?
33:06 - Outro

💾 Code
https://github.com/colbyfayock/my-clo...

🗒️ Read More
https://spacejelly.dev/posts/how-to-l...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...

🐦 Get updates straight to your Twitter @colbyfayock
  / colbyfayock  

📸 Catch the next stream live on Twitch @colbyfayock
  / colbyfayock  

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Demo Image List Starter
https://github.com/colbyfayock/demo-i...

Cloudinary Admin Resources API
https://cloudinary.com/documentation/...

Cloudinary Search API
https://cloudinary.com/documentation/...

Cloudinary Admin Folders API
https://cloudinary.com/documentation/...

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/mountaineer/camp...
License code: 5TZ4YQ0MH0KDIPUD

#colbyfayock #cloudinary #nextjs #images #imagegallery #media #react #webdevelopment