Next.js 13 & 14

Next.js 13 brought a new fundamental way of building Next.js apps with the App Router (/app directory). Part of that includes using React.js technology such as server components that have different requirements when bundling applications.

Pages Router (/src)

By default, Next Cloudinary has full support when using the included components in the src directory with no further actions.

App Router (/app)

General

Using Next Cloudinary in the app directory currently requires marking the parent page or component as a Client Component.

This is due to the split of components in two types: Client Components and Server Components.

At the top of the file, simply add:

"use client";

To avoid marking an entire page as a Client Component, you can create a basic wrapper around any component, which you can then use throughout your application:

"use client";
 
import { CldImage as CldImageDefault, CldImageProps }  from 'next-cloudinary';
 
const CldImage = (props: CldImageProps) => {
  return <CldImageDefault {...props} />
}
 
export default CldImage;

Where you can then import and use your wrapper component just as you would the native CldImage component.

Future versions of this library will hopefully avoid the need to add this marker to the file.

Open Graph (OG) Images & Social Media Cards

The CldOgImage component utilizes the Next.js Head component to add metadata tags to the HTML document's <head>.

In the App Router, the Head component is no longer supported, instead opting for configuration-based control of metadata (opens in a new tab).

You can still easily generate OG images and social card URLs using getCldOgImageUrl in your metadata configuration.

import { getCldOgImageUrl } from 'next-cloudinary';
 
export const metadata = {
  openGraph: {
    ...
    images: getCldOgImageUrl({
      src: '<Public ID>'
    })
  },
};

Find more examples of Social Media Cards.

InstallationBasic Usage