Incorrect TypeScript import and OG image usage in Next.js 13/14 App Router docs

[mukeshdhadhariya]

Overview

While integrating Next Cloudinary with Next.js 13/14 (App Router), I noticed a few small documentation/code issues that could confuse users or cause runtime errors.

These are related to:

TypeScript imports (CldImageProps)

Incorrect OG image metadata example

"use client" placement

Example placeholders

1️⃣ Problem — Mixed JS/TS Import

Current docs show:

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

❌ Issue:

CldImageProps is a TypeScript type, not a runtime export. This will throw an error in JavaScript environments:

Attempted import error: 'CldImageProps' is not exported from 'next-cloudinary'

✅ Fix:

For TypeScript (.tsx):

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

For JavaScript (.jsx):

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

2️⃣ Problem — Invalid OG Image Metadata Format

Current docs show:

images: getCldOgImageUrl({ src: '<Public ID>' })

❌ Issue:

getCldOgImageUrl() returns a string, but Next.js expects an array of objects with { url } keys. This causes invalid OG metadata.

✅ Fix:

images: [
  {
    url: getCldOgImageUrl({ src: 'your-public-id' })
  }
]

3️⃣ Problem — “use client” Placement

The "use client"; directive must be the first line in the file (before any imports). Docs examples place it below imports, which prevents the file from being recognized as a Client Component.

✅ Fix:

"use client";

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

4️⃣ Problem — Example Placeholder Format

The placeholder <Public ID> should not use angle brackets because it may be mistaken for JSX. Use 'your-public-id' instead.

✅ Suggested Corrected Examples Client Wrapper Component

"use client";

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

const CldImage = (props: CldImageProps) => {
  return <CldImageDefault {...props} />;
};

export default CldImage;

OG Image Metadata

import { getCldOgImageUrl } from 'next-cloudinary';

export const metadata = {
  openGraph: {
    title: 'My Page Title',
    description: 'My OG Description',
    images: [
      {
        url: getCldOgImageUrl({ src: 'your-public-id' }),
      },
    ],
  },
};

[Meghana-2124]

Hi! @mukeshdhadhariya , I’d like to submit a PR fixing the TypeScript import and OG image metadata examples. Could you please approve it or add the hacktoberfest-accepted label so my PR counts for Hacktoberfest?

[Meghana-2124]

hey @mukeshdhadhariya , I made a PR kindly review it.