Next.js 13

Next.js 13 brings 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.

At the top of the file, simply add:

"use client";

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