Use the CldImage component for automatically optimized images with the power of Cloudinary.

Add an image from Cloudinary using the following:

import { CldImage } from 'next-cloudinary';

<CldImage width="100" height="100" src="<Your Public ID>" alt="My Image" />

See the component in action at pages/index.js.

CldImage is a Client component and at this time, doesn't automatically append the "use client" directive to the top of the component, meaning, you need to add the directive yourself, either in the component/page you're using CldImage, or by creating your own light component wrapper (recommended).

Create a new file components/CldImage.jsx and inside add:

'use client';

import { CldImage as CldImageDefault } from 'next-cloudinary';

/** @param {import('next-cloudinary').CldImageProps} props  */
export default function CldImage(props) {
  return <CldImageDefault {...props} />;
}

Then you can import this component and use it as you normally would:

import CldImage from 'components/CldImage';

<CldImage width="100" height="100" src="<Your Public ID>" alt="My Image" />

See the component in action at app/app/page.jsx.

Learn more on the Next Cloudinary docs.

• Install the project dependencies with:

yarn install
# or
npm install

• Add your cloud name as an environment variable inside .env.local:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

• Start the development server with:

yarn dev
# or
npm run dev

• Visit the Pages Router demo at http://localhost:3000 or the App Router demo at http://localhost:3000/app!