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

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@lukdrazewski]

I spent at least few days to understand how to use Cloudinary API with Next.js, and finally this movie saved me. Thank you man, great job.

[@colbyfayock]

No problem. Glad it helped!

[@randysmachado]

Hi I'm Brazilian. I really like your videos, I always learn amazing things from them.

[@colbyfayock]

Muito legal! so glad to hear that!

[@nhieljeff2156]

KZbin just auto played this for me after finishing my music playlist so I got curious and watched the entire thing. I know much of this now already, but I was blown away on how you clearly explained the pain factors and what you did as a workaround. The past me struggled with this, and ultimately went about the same way you did in this video . I could've saved myself from sleepless nights had i known of this video!

[@colbyfayock]

wow thanks for the kind words!

[@BarryDocherty]

And may I say that you are a clever lad Colby. So fast and knowing how to write the code without a second thought. I aim to teach my 2 year old boys how to code as soon as they can pick up a pencil and write.

[@colbyfayock]

that sounds fun! i can't wait to teach my 9 month old to code 🤩

[@derekchan1045]

Thanks Colby for this in depth tutorial on Cloudinary. Really appreciated!

[@colbyfayock]

no problem!

[@jrs3239]

I'm Brazilian and a big fan of your channel. Hope you are enjoying the experience. And if you visit Rio, please let me know. 😃

[@colbyfayock]

Thanks I am! Won't be making it to Rio this time but hopefully the next trip to Brazil. We visited once but had bad weather 😭 but still was a great experience

[@elizabethgoullaud826]

This is amazing even 7 years later. I’ve been struggling with GraphCMS assets for a clients photography site and I’m definitely going to try cloudinary instead

[@colbyfayock]

thank you! let me know if you run into any issues

[@rohansalunkhe7268]

I followed the code step by step, however when I run it, but then this "Error: Error serializing `.nextCursor` returned from `getStaticProps` in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value." error appeared. 😅

[@colbyfayock]

check out the video at 25:50 kzbin.info/www/bejne/jnu6lX-YrJiEoLs

[@Fallfishtenkara1]

@@colbyfayock Thank you I was having the exact same problem!

[@colbyfayock]

@@Fallfishtenkara1 awesome glad it helped

[@BarryDocherty]

Great work! Constitutes a save for referencing. This is exactly what I will need. If you ever need some audio processing let me know :D

[@colbyfayock]

Thank you!

[@Unbridledhopebr]

You are great.I just need to slow the video down to 0.75, because you speak very fast. thanks!

[@colbyfayock]

😬 thanks and sorry about that!

[@BarryDocherty]

Initially the updatedNextCursor didn't generate a new next_cursor id and loaded a boat load of console complaints that I had duplicate keys. Had to back track and re-do. But now I don't know what went wrong previously. Only argument I am capable of passing at this time is with the wife 😅. Great video albeit you are fast. But that's why we have a pause button.☺

[@BarryDocherty]

However, I'm not going to want to implement the Load More feature, but rather display the thumbnails of images and onClick it launches a gallery. Rest of video covers the loading all feature from a specific directory I believe. I'm only 75% through it. My needs are to be able to look in a directory and post all images with just 1 HTML request and parse it on the page in a grid. Current site I built has a wee JS that does that, but old tech. Why write 32 image tags when you can write one and Javascript populates incrementally.

[@BarryDocherty]

Success... this is useful for what I need bar the Load More Images.

[@colbyfayock]

@@BarryDocherty 🙌

[@colbyfayock]

Check out the Next Cloudinary for full feature-support in Next.js: next-cloudinary.spacejelly.dev/

[@rlwhttng]

Did you know the code in the video is different from the code in the linked Github repo?

[@arhabersham]

In the "cloudinary.js" file, at line 22 ( resources.map) get an error "Cannot read properties of undefined (reading 'map')" ... choro inconsolável

[@colbyfayock]

hey! that would be due to resources not existing, meaning likely the request didn't work? i would look into why resources is undefined you can check out my code here: github.com/colbyfayock/my-cloudinary-images

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@akhadtop720]

Thanks this video was helpfull

[@colbyfayock]

no problem!

[@jamesgrubb]

Thanks for a great, in-depth walk through. Im not familiar with the '@components/button' syntax i.e using the '@' symbol. Could you explan the usage please?

[@colbyfayock]

hey! yeah that's just a convention i've came across and have enjoyed using when creating mappings to directories in a project. it uses jsconfig to do so github.com/colbyfayock/demo-website-starter/blob/main/jsconfig.json can read a little more here: nextjs.org/docs/advanced-features/module-path-aliases

[@jamesgrubb]

@@colbyfayock Many thanks

[@mycodingjourney8413]

Hey Colby this video is fantastic, I wonder though how would I go about retrieving images that are deeply nested e.g. {root folder >> second folder >> third folder >> images}? I have been trying to solve this issue for last two days with no luck

[@colbyfayock]

thanks! have you tried the Search API? cloudinary.com/documentation/search_api you should be able to add an expression folder=path/to/my/resources

[@GabrielMartinez-ez9ue]

Hi Colby. Whats the difference in using the SDKs with the Admin API vs this method?

[@colbyfayock]

hey! good question. there really shouldn't be _too_ much difference, really the SDK should be more convenient. just being honest, i can't remember the intent of using the API endpoint directly here, but I would more often than not in production applications use the Node SDK as it provides an easier API for working with Cloudinary

[@GabrielMartinez-ez9ue]

@@colbyfayock Thank you for the answer Colby.

[@yasminamran5]

How do I use it if I want to get the images url from a different program. What is the calling point ?

[@colbyfayock]

can you elaborate on your question? What do you mean by get the url from a different program? What's an example?

[@yasminamran5]

I want to use the images for memory match game but I couldint figure out the calling point @@colbyfayock

[@colbyfayock]

@@yasminamran5 if you're trying to get a list of the images that you have inside of your Cloudinary account, you have a few options you can use the Admin API wich requires your API KEy and Secret: cloudinary.com/documentation/admin_api#get_resources the search API if you're looking for specific items: cloudinary.com/documentation/search_api Or you can even use this trick where if you tag the images, you can request it via a public JSON file endpoint support.cloudinary.com/hc/en-us/articles/203189031-How-to-retrieve-a-list-of-all-resources-sharing-the-same-tag-

[@jeremiahhaastrup8692]

How would you display images into individual img tags? Would it be best to use the URLs?

[@colbyfayock]

since releasing this video i launched a library! maybe this helps? next-cloudinary.spacejelly.dev/

[@BarryDocherty]

ok so the .env.local gets ignored. Is it insecure to push that file to a node server for production. Obviously one does not want expose credentials. Asking this early in the video though...

[@colbyfayock]

yes that's correct - your environment variables when deploying to an environment (like Vercel or Netlify) would get added within the project when you're creating the project on their site, or you can add it after the project is added

[@julianbustos3079]

Great tutorial and article Colby to follow along, however I can´t seem to get the folders to work, I always get the same response from the request and not the images from the respective folder, I am however able to get the folders and everything else from cloudinary.... do you think it has something to do with the way my cloudinary is setup? I was working with it before, however I don't remember changing anything on the settings. The load more button works perfectly! Thank you!

[@colbyfayock]

would you mind sharing the request you're making?

[@julianbustos3079]

@@colbyfayock yeah of course, this code sample is inside the run function inside a useEffect with activeFolder as a dependency---- const results = await fetch(`api/cloudImages`, { method: "POST", body: JSON.stringify({ expression: `folder="${activeFolder || ""}"`, }), }).then((res) => res.json()); console.log({ results }); const newImages = mapImageResources(results.resources); setImages(newImages); ----

[@colbyfayock]

@@julianbustos3079 looks similar to the code I'm running: github.com/colbyfayock/my-cloudinary-images/blob/main/src/pages/index.js#L57 is the request you're making to cloudinary similar to what I'm doing aas well? github.com/colbyfayock/my-cloudinary-images/blob/main/src/lib/cloudinary.js#L13 can find the full code sample for what i did in that project and here's the text-based tutorial spacejelly.dev/posts/how-to-list-display-cloudinary-image-resources-in-a-gallery-with-next-js-react/ i'd recommend also inspecting the request in the Network tab to see if the parameters are passing in as you expect

[@julianbustos3079]

@@colbyfayock Oh man thanks, I did go through the text-based tutorial, for some reason I missed the search function so it obviously was not working :D but your comment helped me find my error! thanks so much man!

[@colbyfayock]

@@julianbustos3079 no worries glad to hear

[@MorganPeterson-r4q]

Hey Colby! great video. Im having some trouble rendering this funtioanl Component using React Router. Maybe you can help?

[@colbyfayock]

hey! are you getting any errors? are you takling about the next/image component? That would only be available in a Next.js app

[@MorganPeterson-r4q]

@@colbyfayock yes Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

[@MorganPeterson-r4q]

plus I'm using plain React

[@colbyfayock]

@@MorganPeterson-r4q unfortunately you'll have trouble with some of this with plain react

[@colbyfayock]

the error sounds like you're trying to use a React hook where its not supported or you're using code that uses it where its not supposrted have you seen my code here? github.com/colbyfayock/my-cloudinary-images/blob/main/src/pages/index.js most of that should work but the Next.js Image component *will not* work in a plain React app, its only supported in a Next.js app

[@NotBeHaris]

Awesome sir. Sir when we are using getStaticprops so images fetch on build time. So images not update after build on production. As i understand getStaticprops

[@colbyfayock]

thank you! that's mostly true for the initial load, as the list of images would only update when compiled, but in my example with the activeFolder useEffect functionality, it should hydrate and re-fetch right away, so any new images should be available after that loads but kinda to your point, you could just as easily move this into getServerSideProps if you prefer to do it SSR and have that first request always be fresh!

[@NotBeHaris]

@@colbyfayock thanks for detail message. Means that now i understand the core concept of ssr and csr

[@colbyfayock]

@@NotBeHaris in that regard, this video might help out too kzbin.info/www/bejne/ppvLm6SLp6xshZY

[@NotBeHaris]

@@colbyfayock thanks again for suggestion.

[@haluskua1947]

how could you serve that on netlify as a jamstack fullstack

[@colbyfayock]

can you elaborate? this should work just fine deploying to Netlify

[@godswillonyeka5973]

I used normal React for it and I have been having errors

[@colbyfayock]

Can you elaborate?

[@MorganPeterson-r4q]

@@colbyfayock same here.. My componnet is not rendering when I use react router

[@BarryDocherty]

getting this error: error - pages/index.js (28:18) @ Home TypeError: images1.map is not a function 26 | 27 | > 28 | {images.map(image => { with a wee red arrow pointing to row 28 at the . Im stumped. But be it known I'm injecting this to an app I already started. So I probably missed something. For the most part the app is a clone of yours now. Not sure where Images1.map is coming from. Going to run off your github clone instead. I was trying to inject it to an existing project I have so maybe I am working backwards and inject my existing app into your clone. Always a tricky affair adapting an app to another.

[@BarryDocherty]

It's always something really subtly overlooked like wrapping images {} in the Home. So tricky. Solved. But solved by moving my app code to your app code. Went back to mine still get an error. Have to hunt down the culprit.

[@BarryDocherty]

Probably missing a file in the tree. Bottom line, your cloned app works, my app has issues. I overlooked something. But I am determined to find out what it is. So all of the above: enjoy reading, it's a non-issue now.

[@colbyfayock]

@@BarryDocherty those can be tricky to find, hope you find it

[@itbeat7899]

npm run dev time bookmark: 10:02

[@colbyfayock]

🚀

[@marcuszierke7930]

Hi Colby, thanks for the video. I tried to reproduce the same logic in a react@18 + TS app to fetch my files from cloudinary with the same API you used (line 38 - kzbin.info/www/bejne/jnu6lX-YrJiEoLs). But I always get a 404 (has been blocked by CORS polic) error. Do you have any idea why? Cheers! P.S. It works with the curl command and in Postman perfectly fine ...

[@colbyfayock]

hey Marcus, hard to tell without seeing teh code, but im also not that familiar with TS. here's my code, maybe you'll find the issue? github.com/colbyfayock/my-cloudinary-images also check this out: support.cloudinary.com/hc/en-us/community/posts/4414912109586-CORS-Error-when-fetching-folders-in-browser

[@daphnesimons1774]

Great video Colby, but i keep getting the following error, can you please help? error - src/pages/index.js (62:15) @ getStaticProps ReferenceError: r is not defined 60 | }, 61 | } > 62 | ).then((r = r.json())) | ^ 63 | console.log('results', results) 64 | return { 65 | props: {},

[@colbyfayock]

hey thanks! hard to tell from only that but something with the request seems to be failing. here's my code, see if that helps? github.com/colbyfayock/my-cloudinary-images/