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

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: '' })

```

❌ 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 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 ;
};

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' }),
},
],
},
};
```