Next.js Discord

Discord Forum

cloudinary images using nextjs 13 app router

Answered
Mossyrose gall wasp posted this in #help-forum
Open in Discord
Mossyrose gall waspOP
Hello everyone. im usings cloudinary in my nextjs app router project but when im using inside server component it returns undefined/null but when im adding 'use client' it works. any way to handle it?
Answered by North Pacific hake
Are you using the <CldImage> component from next-cloudinary npm module to display images? That's what I'm using (which wraps Nextjs's <Image> component, and the docs say that you must have "use client" at the top of your source file for it to work.
View full answer

4 Replies

@Mossyrose gall wasp Hello everyone. im usings cloudinary in my nextjs app router project but when im using inside server component it returns undefined/null but when im adding 'use client' it works. any way to handle it?
North Pacific hake
Are you using the <CldImage> component from next-cloudinary npm module to display images? That's what I'm using (which wraps Nextjs's <Image> component, and the docs say that you must have "use client" at the top of your source file for it to work.
Answer
Mossyrose gall waspOP
oh thank you it MUST client component right? im using those packages
import { AdvancedImage, placeholder, responsive } from "@cloudinary/react";
import { Cloudinary } from "@cloudinary/url-gen";
North Pacific hake
Take a look at Cloudinary's `<CldImage>' component...maybe that will be a better fit for you (and yes, it has to be client component): https://next.cloudinary.dev/cldimage/basic-usage
Mossyrose gall waspOP
thank you so much i will try this one @North Pacific hake