### Example: Adding an Underlay

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Example of how to add an underlay.

```jsx
underlays={[{
  publicId: 'images/earth',
}]}

```

--------------------------------

### Example: Adding an Overlay

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Example of how to add an overlay with custom positioning and effects.

```jsx
overlays={[{
  publicId: 'images/earth',
  position: {
    x: 50,
    y: 50,
    gravity: 'north_west',
  },
  appliedEffects: [
    {
      multiply: true
    }
  ]
}]}

```

--------------------------------

### Install Project Dependencies Locally

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Install project dependencies using pnpm after cloning the repository. This command should be run from the root of the project.

```bash
pnpm install
```

--------------------------------

### Upload Example Images to Cloudinary

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Execute the upload script to populate your Cloudinary account with example images. This script uses the credentials defined in your .env file.

```bash
pnpm upload
```

--------------------------------

### Basic CldUploadButton Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/guides/uploading-images-and-videos.mdx

A simplified example of CldUploadButton setup for uploading assets to Cloudinary. It includes the essential onUpload handler to process upload results and specifies the signature endpoint and upload preset for signed uploads.

```jsx
import { CldUploadButton } from 'next-cloudinary';

const [resource, setResource] = useState();

<CldUploadButton
  className={styles.button}
  onUpload={(error, result, widget) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
    widget.close();
  }}
  signatureEndpoint="/api/sign-cloudinary-params"
  uploadPreset="next-cloudinary-signed"
>
  Upload to Cloudinary
</CldUploadButton>
```

--------------------------------

### Basic CldOgImage Usage

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldogimage/examples.mdx

Use the `src` prop to specify a public ID for the image. This is the most basic way to get started with CldOgImage.

```jsx
import { CldImage } from 'next-cloudinary';

<CldOgImage
  src="<Public ID>"
/>
```

--------------------------------

### Example getCldImageUrl Options

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Demonstrates the basic structure for passing options to getCldImageUrl. The 'src' property is mandatory.

```javascript
{ src: 'myimage', ... }
```

--------------------------------

### Install next-cloudinary

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Install the next-cloudinary package using npm. This is the first step to integrate Cloudinary into your Next.js project.

```bash
npm install next-cloudinary
```

--------------------------------

### Example Configuration Object

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Allows for custom configuration, such as setting a secure distribution URL. Refer to the SDK configuration parameters for a full list.

```javascript
{ url: { secureDistribution: 'spacejelly.dev' } }
```

--------------------------------

### Example Version Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Specifies the asset version for cache busting or referencing specific versions. See asset versions documentation.

```javascript
1234
```

--------------------------------

### Example Image Source Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Sets the source identifier for an image when using getCldImageUrl. This is a required parameter.

```javascript
my-public-id
```

--------------------------------

### Example Raw Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

An example of a raw transformation string within the 'rawTransformations' prop.

```jsx
['e_blur:2000']
```

--------------------------------

### CldImage Preserving Transformations Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/basic-usage.mdx

Example demonstrating the 'preserveTransformations' prop with a Cloudinary URL that includes pre-applied transformations.

```jsx
import { CldImage } from 'astro-cloudinary';

<CldImage
  src="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/e_background_removal/b_blueviolet/f_auto/q_auto/v1/cld-sample-5"
  width="800"
  height="600"
  preserveTransformations
  alt="test"
/>
```

--------------------------------

### Install next-cloudinary with pnpm

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/installation.mdx

Use pnpm to install the next-cloudinary package. This is the first step to integrating Cloudinary into your Next.js project.

```bash
pnpm install next-cloudinary
```

--------------------------------

### Install next-cloudinary with yarn

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/installation.mdx

Use yarn to install the next-cloudinary package. This is the first step to integrating Cloudinary into your Next.js project.

```bash
yarn add next-cloudinary
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/next-cloudinary/tests/nextjs-app/README.md

Execute these commands to start the local development server for your Next.js project. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### Fill Light Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Apply fill light effects with the fillLight prop. Can be a boolean or a string for specific values.

```javascript
<span><code>true</code>, <code>70:20</code></span>
```

--------------------------------

### Example Asset Type Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Specifies the type of asset to be delivered. The default is 'image', but 'video' is also a common option. See transformation URL structure for details.

```javascript
video
```

--------------------------------

### Run the Next.js Development Server

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Start the local development server for both the next-cloudinary package and the docs project. This command should be run in separate terminal tabs for each directory.

```bash
pnpm dev
```

--------------------------------

### Example Delivery Type Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Determines how the asset is delivered. The default is 'upload', but 'fetch' can be used for assets fetched from external URLs. See delivery types documentation.

```javascript
fetch
```

--------------------------------

### Image Transformations Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/index.mdx

Demonstrates using CldImage for image transformations like cropping and resizing. The 'sizes' prop is used for responsive image delivery.

```jsx
<CldImage
        className="rounded-lg border border-zinc-200 mb-6"
        width="800"
        height="600"
        src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-transformations_vjacda`}
        sizes="50w"
        alt="Person editing image representing Cloudinary’s image transformation and AI tools"
      />
```

--------------------------------

### Example SEO Suffix Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Appends a custom string to the URL for SEO purposes. This is useful for dynamic SEO suffixes.

```javascript
my-image-content
```

--------------------------------

### Grayscale Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Convert an image to grayscale using the grayscale prop. Set to `true` for effect.

```javascript
<code>true</code>
```

--------------------------------

### Example Border Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Sets a 20px solid blue border for an image. Refer to the transformation reference for more details on border parameters.

```javascript
20px_solid_blue
```

--------------------------------

### Opacity Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Control image opacity with the opacity prop. Accepts a number or a string value.

```javascript
<code>40</code>
```

--------------------------------

### Example getCldImageUrl Config

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Shows how to provide Cloudinary configuration, including the cloud name, to getCldImageUrl. This is essential for connecting to your Cloudinary account.

```javascript
{ cloud: { cloudName: 'name' } }
```

--------------------------------

### Image Optimization Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/index.mdx

Displays an image with Cloudinary, showcasing file size optimization. The 'sizes' prop helps in delivering appropriately sized images based on viewport.

```jsx
<CldImage
        className="rounded-lg border border-zinc-200 mb-6"
        width="800"
        height="600"
        src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-optimization_saagby`}
        sizes="50w"
        alt="Galaxy image showing file size optimization from 2.8MB to 44KB for faster performance"
      />
```

--------------------------------

### Example Default Image Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Specifies a default image to be used if the requested asset is not found. More information can be found on default image transformations.

```javascript
myimage.jpg
```

--------------------------------

### Example Transformation for Effects

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

An example of a transformation object within the 'effects' prop, specifying width, height, and crop.

```jsx
{ background: 'blue' }
```

--------------------------------

### Configure Upload Widget Options

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

Customize the Upload Widget behavior using the `options` prop. This example sets allowed sources, enables multiple uploads, and limits the maximum number of files to 5.

```jsx
options={
  sources: ['local', 'url', 'unsplash'],
  multiple: true,
  maxFiles: 5
}
```

--------------------------------

### Apply Poster Transformations

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/examples.mdx

Apply transformations to the auto-generated thumbnail (poster) of the video. This example applies a tint effect.

```jsx
import { CldVideoPlayer } from 'next-cloudinary';

<CldVideoPlayer
  id="poster-transformations"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  poster={{
    tint: 'equalize:80:blue:blueviolet'
  }}
/>
```

--------------------------------

### Oil Paint Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Simulate an oil paint effect with the oilPaint prop. Accepts `true` or a strength value.

```javascript
<span><code>true</code>, <code>40</code></span>
```

--------------------------------

### Example Text Decoration Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Applies text decorations like 'underline'. This falls under the general styling parameters.

```javascript
underline
```

--------------------------------

### Root Component Setup with Analytics

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/_app.mdx

Configure the root component to include Google Analytics and Vercel Analytics. Ensure necessary imports are present for tracking page views and user activity.

```javascript
import Link from 'next/link';
import { Analytics } from '@vercel/analytics/react';
import { GoogleAnalytics } from "nextjs-google-analytics";

import 'nextra-theme-docs/style.css';
import '../styles/global.scss';

export default function Nextra({ Component, pageProps }) {
  return (
    <>
      <GoogleAnalytics trackPageViews />
      <div className="bg-primary">
        <Link className="block text-center py-2" href="/changelog">
          <p className="text-white font-semibold text-xs">
            Next Cloudinary v6 now available! <span className="underline underline-offset-2">View Changelog</span>
          </p>
        </Link>
      </div>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}
```

--------------------------------

### Example Font Weight Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Defines the font weight, such as 'bold'. This is covered under the general styling parameters.

```javascript
bold
```

--------------------------------

### Configure Asset Type to Video

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Set the asset type to 'video' when the resource is a video, for example, to create a thumbnail.

```jsx
assetType: 'video'
```

--------------------------------

### Example Flags Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Applies specific flags to modify transformation behavior, such as 'keep_iptc'. Consult the transformation reference for available flags.

```javascript
['keep_iptc']
```

--------------------------------

### Outline Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Add an outline effect using the outline prop. Can be `true`, a strength value, or detailed parameters.

```javascript
<span><code>true</code>, <code>40</code>, <code>outer:15:200</code></span>
```

--------------------------------

### Example Image Height Configuration

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Specifies the height for an image when using getCldImageUrl. This is required unless the Next Image component's 'fill' prop is used.

```javascript
600
```

--------------------------------

### Example Font Size Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Sets the font size for text elements. This parameter is part of the general styling parameters.

```javascript
48
```

--------------------------------

### Gradient Fade Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Utilize the gradientFade prop for gradient fade effects. Accepts a boolean or a string for detailed parameters.

```javascript
<span><code>true</code>, <code>symmetric:10,x_0.2,y_0.4</code></span>
```

--------------------------------

### Specify Image Format

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the `format` prop to deliver the image in a specific format, such as WebP or PNG. This can be useful for compatibility or specific optimization needs. Example shows setting format to PNG.

```jsx
format="png"
```

--------------------------------

### Image Upload Widget Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/index.mdx

Illustrates the integration of a drop-in widget for uploading assets to Cloudinary. This component simplifies the asset uploading process within a Next.js application.

```jsx
<CldImage
        className="rounded-lg border border-zinc-200 mb-6"
        width="800"
        height="600"
        src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-upload-widget_fvrnjs`}
        sizes="50w"
        alt="Drag and drop widget interface showing how to upload images easily using Cloudinary"
      />
```

--------------------------------

### Improve Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Enhance image quality with the improve prop. Accepts `true`, a specific value, or a mode like `indoor`.

```javascript
<span><code>true</code>, <code>50</code>, <code>indoor</code></span>
```

--------------------------------

### Unsigned Upload with State Management

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadbutton/basic-usage.mdx

This example demonstrates an unsigned upload using CldUploadButton. It manages the uploaded resource's URL in the component's state and updates the UI upon successful upload. The widget is closed after upload.

```jsx
import { useState } from 'react';
import { CldUploadButton } from '../../../next-cloudinary';

import styles from '../../styles/Docs.module.scss';

export const UnsignedUpload = () => {
  const [resource, setResource] = useState();
  return (
    <>
      <CldUploadButton
        className={styles.button}
        onUpload={(result, widget) => {
          setResource(result?.info);
          widget.close();
        }}
        uploadPreset="<Upload Preset>"
      />
      <p>URL: { resource?.secure_url }</p>
    </>
  )
}
```

--------------------------------

### Distort Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the distort prop to apply custom distortion effects. Accepts a string of transformation values.

```javascript
<span><code>150:340:1500:10:1500:1550:50:1000</code>, <code>arc:180.0</code></span>
```

--------------------------------

### Example Uploaded Resource Structure

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

This object structure represents the information available for an uploaded resource within the 'info' property of the results callback. It includes details like public_id, secure_url, height, and width.

```javascript
{
  height: 400;
  public_id: 'mypublicid';
  secure_url: 'https://res.cloudinary.com/.../mypublicid';
  width: 400;
  ...
}
```

--------------------------------

### Cloudinary Transformation Styling Parameters

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Examples of styling parameters for Cloudinary transformations, such as border, color, font family, font size, font weight, letter spacing, line spacing, stroke, and text decoration.

```javascript
20px_solid_blue
```

```javascript
blueviolet
```

```javascript
Open Sans
```

```javascript
48
```

```javascript
bold
```

```javascript
14
```

```javascript
14
```

```javascript
true
```

```javascript
underline
```

--------------------------------

### Generative Fill Background with getCldImageUrl

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/examples.mdx

Fills the background of an image using Generative AI with the `fillBackground` transformation. This example also uses `crop: 'pad'` to ensure the content fits within the specified dimensions.

```jsx
import { getCldImageUrl } from 'next-cloudinary';

getCldImageUrl({
  src: '<Your Public ID>',
  width: 960,
  height: 600,
  fillBackground: true,
  crop: 'pad'
})
```

--------------------------------

### Basic Image with Fill Crop

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/guides/responsive-images.mdx

Use this component to display an image cropped to a 1:1 ratio using the 'fill' crop mode. Ensure the 'next-cloudinary' package is installed.

```jsx
import { CldImage } from 'next-cloudinary';

<CldImage
  width="960"
  height="960"
  src="<Your Public ID>"
  crop="fill"
  sizes="100vw"
  alt="Description"
/>
```

--------------------------------

### Example Named Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

An example of a named transformation string within the 'namedTransformations' prop.

```jsx
['my-named-transformation']
```

--------------------------------

### Replace image background with prompt

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Provide a string prompt to the `replaceBackground` prop to guide the generative AI in replacing the image background with a specific theme. Requires the Cloudinary AI Background Removal add-on.

```jsx
replaceBackground="fish tank"
```

--------------------------------

### Social Card Generation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/index.mdx

Shows how to generate social cards for a Next.js project using Cloudinary. This component is designed for creating visually appealing social media previews.

```jsx
<CldImage
        className="rounded-lg border border-zinc-200 mb-6"
        width="800"
        height="600"
        src={`${process.env.IMAGES_DIRECTORY}/next-cloudinary-social-cards_ll4fqu`}
        sizes="50w"
        alt="Example social card for a Next.js project generated dynamically using Cloudinary"
      />
```

--------------------------------

### Configure Cloudinary Environment Variables

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Set up your Cloudinary credentials in a .env file to authenticate with the service. Ensure you replace placeholders with your actual Cloudinary account details.

```bash
CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"
```

--------------------------------

### Apply Multiple Underlays

Source: https://context7.com/cloudinary-community/next-cloudinary/llms.txt

Demonstrates how to apply multiple images as underlays to a base image, effectively creating a split or composite background. Each underlay can be independently sized and positioned.

```jsx
import { CldImage } from 'next-cloudinary';

// Multiple underlays
<CldImage
  src="cld-sample-3"
  width="960"
  height="600"
  removeBackground
  underlays={[
    {
      publicId: 'cld-sample-2',
      width: '0.5',
      height: '1.0',
      crop: 'fill',
      position: { gravity: 'north_west' },
      flags: ['relative']
    },
    {
      publicId: 'samples/landscapes/beach-boat',
      width: '0.5',
      height: '1.0',
      crop: 'fill',
      position: { gravity: 'south_east' },
      flags: ['relative']
    },
  ]}
  alt="Person with split background"
  sizes="100vw"
/>
```

--------------------------------

### Example Letter Spacing Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Adjusts the spacing between letters. Refer to the styling parameters documentation for more details.

```javascript
14
```

--------------------------------

### Configure Local Development Environment Variables

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Set up environment variables in a .env.local file within the 'docs' directory for local development. This includes Cloudinary credentials required for features like the Upload Widget.

```bash
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your Cloudinary API Key>"
CLOUDINARY_API_SECRET="<Your Cloudinary API Secret>"
```

--------------------------------

### Example Color Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Sets the color for text or other elements. More information on color transformations is available in the documentation.

```javascript
blueviolet
```

--------------------------------

### CldOgImage with Background Removal and Underlay

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldogimage/examples.mdx

Demonstrates background removal and applying an underlay image. The `removeBackground` prop removes the image background, and `underlay` adds another image beneath the main one.

```jsx
import { CldImage } from 'next-cloudinary';

<CldOgImage
  src="<Public ID>"
  tint="100:0000FF:0p:FF1493:100p"
  blur="2000"
  removeBackground
  overlays={[{
    text: {
      color: 'white',
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      text: 'Next Cloudinary'
    }
  }]}
  underlay="images/galaxy"
/>
```

--------------------------------

### Pixelate Region Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Pixelate a specific region of an image using pixelateRegion. Requires coordinates and dimensions.

```javascript
<span><code>true</code>, <code>35,h_425,w_550,x_600,y_400</code></span>
```

--------------------------------

### Pixelate Transformation Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Apply a pixelate effect using the pixelate prop. Accepts `true` or a pixel size value.

```javascript
<span><code>true</code>, <code>20</code></span>
```

--------------------------------

### Run Project Tests

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/README.md

Execute the test suite for the next-cloudinary package. Ensure you are in the 'next-cloudinary' directory when running this command.

```bash
pnpm test
```

--------------------------------

### Configure Cloudinary Environment

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/configuration.mdx

Use the `config` prop to set up your Cloudinary environment with your cloud name. Ensure your cloud name is correctly provided.

```jsx
config={
  cloud: {
    cloudName: '<Your Cloud Name>',
  }
}
```

--------------------------------

### Gamma Correction Example

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Adjust gamma correction using the gamma prop. Accepts a boolean or a string for specific values.

```javascript
<span><code>true</code>, <code>100</code></span>
```

--------------------------------

### Callback Functions Reference

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

A reference table of all available callback functions for the Cloudinary Upload Widget, including their types and examples.

```APIDOC
## Callback Functions

This section details the various callback functions that can be used with the Cloudinary Upload Widget to manage and respond to different events during the upload process.

### `onAbort`

- **Type**: `function`
- **Description**: Triggered when an upload is aborted.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#abort](https://cloudinary.com/documentation/upload_widget_reference#abort)

### `onBatchCancelled`

- **Type**: `function`
- **Description**: Triggered when a batch of uploads is cancelled.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#batch_cancelled](https://cloudinary.com/documentation/upload_widget_reference#batch_cancelled)

### `onClose`

- **Type**: `function`
- **Description**: Triggered when the upload widget is closed.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#close_event](https://cloudinary.com/documentation/upload_widget_reference#close_event)

### `onDisplayChanged`

- **Type**: `function`
- **Description**: Triggered when the widget's display state changes.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#display_changed](https://cloudinary.com/documentation/upload_widget_reference#display_changed)

### `onError`

- **Type**: `function`
- **Description**: Triggered when an error occurs during the upload process.
- **Example**: `(error, options) => { }`

### `onOpen`

- **Type**: `function`
- **Description**: Triggered when the upload widget is opened.
- **Example**: `(widget) => { }`

### `onPublicId`

- **Type**: `function`
- **Description**: Triggered when a public ID is generated for an upload.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#publicid](https://cloudinary.com/documentation/upload_widget_reference#publicid)

### `onQueuesEnd`

- **Type**: `function`
- **Description**: Triggered when all upload queues have finished processing.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#queues_end](https://cloudinary.com/documentation/upload_widget_reference#queues_end)

### `onQueuesStart`

- **Type**: `function`
- **Description**: Triggered when upload queues begin processing.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#queues_start](https://cloudinary.com/documentation/upload_widget_reference#queues_start)

### `onRetry`

- **Type**: `function`
- **Description**: Triggered when an upload is retried.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#retry](https://cloudinary.com/documentation/upload_widget_reference#retry)

### `onShowCompleted`

- **Type**: `function`
- **Description**: Triggered when the upload completion status is shown.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#show_completed](https://cloudinary.com/documentation/upload_widget_reference#show_completed)

### `onSourceChanged`

- **Type**: `function`
- **Description**: Triggered when the upload source changes.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#source_changed](https://cloudinary.com/documentation/upload_widget_reference#source_changed)

### `onSuccess`

- **Type**: `function`
- **Description**: Triggered when an upload is successful.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#success](https://cloudinary.com/documentation/upload_widget_reference#success)

### `onTags`

- **Type**: `function`
- **Description**: Triggered when tags are applied to an upload.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#tags](https://cloudinary.com/documentation/upload_widget_reference#tags)

### `onUpload` (Deprecated)

- **Type**: `function`
- **Description**: Deprecated callback for upload events.
- **Example**: `(results, widget) => { }`

### `onUploadAdded`

- **Type**: `function`
- **Description**: Triggered when a file is added to the upload queue.
- **Example**: `(results, options) => { }`
- **More Info**: [https://cloudinary.com/documentation/upload_widget_reference#upload_added](https://cloudinary.com/documentation/upload_widget_reference#upload_added)

```

--------------------------------

### Configure Cloudinary Environment

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Set up the Cloudinary environment with your cloud name. This is essential for connecting to your Cloudinary account.

```jsx
config: {
  cloud: {
    cloudName: 'my-cloud'
  }
}
```

--------------------------------

### Player with Chapters and Selector

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/examples.mdx

Add chapter markers and a chapter selection button to the video player. Define chapters using an object where keys are timestamps and values are chapter names. Replace '<Your Public ID>' with your video's public ID.

```jsx
import { CldVideoPlayer } from 'next-cloudinary';

<CldVideoPlayer
  id="chapters-selector"
  width="4096"
  height="2160"
  src="<Your Public ID>"
  chapters={{
    0: "Chapter 1",
    6: "Chapter 2",
    9: "Chapter 3"
  }}
  chaptersButton
/>
```

--------------------------------

### Configure Video Player with Custom CNAME

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/configuration.mdx

Set a custom CNAME for the video player's delivery URL using the `cname` prop.

```jsx
spacejelly.dev
```

--------------------------------

### Example Font Family Transformation

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

Specifies the font family to be used for text overlays or other text-based transformations. Consult the styling parameters documentation for more.

```javascript
Open Sans
```

--------------------------------

### Basic CldUploadButton Usage

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadbutton/basic-usage.mdx

Import and use the CldUploadButton component with a specified upload preset. For Next.js 13+ with the App Router, ensure the "use client" directive is present.

```jsx
import { CldUploadButton } from 'next-cloudinary';

<CldUploadButton uploadPreset="<Upload Preset>" />
```

--------------------------------

### Generative AI: Fill Background

Source: https://context7.com/cloudinary-community/next-cloudinary/llms.txt

Extend an image by filling the background with AI-generated content. Use 'fillBackground' with 'gravity' and a 'prompt' to guide the generation.

```jsx
// Generative Fill - Extend image with AI-generated content
<CldImage
  src="cld-sample-2"
  width="1400"
  height="600"
  crop="pad"
  fillBackground={{
    gravity: 'south',
    prompt: 'sunset sky'
  }}
  alt="Extended image with generative fill"
  sizes="100vw"
/>
```

--------------------------------

### Instance Methods

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

Details the instance methods available on the Upload Widget for controlling its behavior and state.

```APIDOC
## Instance Methods

The Upload Widget exposes instance methods that gives the ability to have greater control and flexbility over the upload experience.

They're exposed either through event handler callback or child function parameters.

| Prop        | Type     | Description                                                                    |
|-------------|----------|--------------------------------------------------------------------------------|
| close       | function | Closes and resets the widget to its initial state without removing it from memory. |
| destroy     | function | Hides a previously rendered widget while retaining its current state in memory.    |
| hide        | function | Closes the widget and completely removes it from the DOM. Returns a promise that resolves upon cleanup completion. |
| isDestroyed | function | Returns whether the destroy method was called on this instance.                  |
| isMinimized | function | Returns whether the widget is currently minimized.                               |
| isShowing   | function | Returns whether the widget is currently visible.                                 |
| minimize    | function | Minimizes the widget.                                                          |
| open        | function | Renders an existing widget currently in memory, but that is not currently displayed. |
| show        | function | Renders a previously hidden widget.                                              |
| update      | function | Updates a widget currently in memory with new options.                         |
```

--------------------------------

### Handling Upload Success with CldUploadWidget

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

Use the onSuccess action to perform tasks after a successful upload. This example logs the public ID of the uploaded asset to the console.

```jsx
<CldUploadWidget
  ...
  onSuccess={(results) => {
    console.log('Public ID', results.info.public_id);
  }}
/>
```

--------------------------------

### Add Text Overlay with Styling

Source: https://context7.com/cloudinary-community/next-cloudinary/llms.txt

Illustrates adding text as an overlay with extensive styling options including font, size, color, decoration, and positioning. Ensure the font is available in Cloudinary or use a standard web font.

```jsx
import { CldImage } from 'next-cloudinary';

// Text overlay with styling
<CldImage
  src="cld-sample-5"
  width="960"
  height="600"
  crop="fill"
  overlays={[{
    position: {
      x: 60,
      y: 60,
      angle: -20,
      gravity: 'south_east',
    },
    text: {
      color: 'blueviolet',
      fontFamily: 'Source Sans Pro',
      fontSize: 160,
      fontWeight: 'black',
      textDecoration: 'underline',
      letterSpacing: -15,
      text: 'With Style'
    }
  }]}
  alt="Image with text overlay"
  sizes="100vw"
/>
```

--------------------------------

### CldUploadWidget with Multiple Sources

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/examples.mdx

Configure the CldUploadWidget to allow uploads from multiple sources like local files, URLs, and Unsplash. Requires a signature endpoint and upload preset.

```jsx
import { CldUploadWidget } from 'next-cloudinary';

const [resource, setResource] = useState();

<CldUploadWidget
  options={{ sources: ['local', 'url', 'unsplash'] }}
  signatureEndpoint="/api/sign-cloudinary-params"
  onSuccess={(result, { widget }) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
  }}
  onQueuesEnd={(result, { widget }) => {
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick() {
      setResource(undefined);
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>
```

--------------------------------

### CldImage with Hardcoded Placeholder

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/guides/placeholders.mdx

This example shows how to use the CldImage component with a hardcoded SVG data URL as a placeholder, useful for static generation or when dynamic generation is not feasible.

```jsx
<CldImage
    width="800"
    height="600"
    crop="fill"
    src="${process.env.IMAGES_DIRECTORY}/mountain"
    sizes="100w"
    placeholder="data:image/svg+xml;base64,
      CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzMzMyIgb2Zmc2V0PSIyMCUiIC8+CiAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMjIyIiBvZmZzZXQ9IjUwJSIgLz4KICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDwvZGVmcz4KICAgICAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMzMzMiIC8+CiAgICAgIDxyZWN0IGlkPSJyIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0idXJsKCNnKSIgLz4KICAgICAgPGFuaW1hdGUgeGxpbms6aHJlZj0iI3IiIGF0dHJpYnV0ZU5hbWU9IngiIGZyb209Ii02MDAiIHRvPSI2MDAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAgLz4KICAgIDwvc3ZnPg=="
    alt="Mountains"
  />
```

--------------------------------

### Set Player Font Face

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/configuration.mdx

Use the 'fontFace' prop to specify the player UI font. Uses Google Fonts. Example shown is 'Source Serif Pro'.

```javascript
"Source Serif Pro"
```

--------------------------------

### Implement Unsigned Uploads with CldUploadWidget

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/examples.mdx

Use CldUploadWidget for unsigned uploads. Configure the uploadPreset and handle onSuccess and onQueuesEnd events. The widget opens on button click and closes automatically after uploads are queued.

```jsx
import { CldUploadWidget } from 'next-cloudinary';

const [resource, setResource] = useState();

<CldUploadWidget
  uploadPreset="<Your Upload Preset>"
  onSuccess={(result, { widget }) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
  }}
  onQueuesEnd={(result, { widget }) => {
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick() {
      setResource(undefined);
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>
```

--------------------------------

### Generate Video URL with Transformations

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldvideourl/basic-usage.mdx

Apply Cloudinary transformations like 'fill' cropping and 'auto' gravity to dynamically adjust video output. Requires 'next-cloudinary' import.

```javascript
const url = getCldVideoUrl({
  src: '<Public ID>',
  width: 1080,
  height: 1080,
  crop: 'fill',
  gravity: 'auto'
});
```

--------------------------------

### Use Generative AI to Enhance Image

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the `enhance` prop as a boolean to apply generative AI for improving image visual appeal. No additional setup is required.

```jsx
enhance
```

--------------------------------

### Generate Basic Video URL

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldvideourl/basic-usage.mdx

Use this when you need to generate a Cloudinary video URL with essential parameters. Ensure 'next-cloudinary' is imported.

```javascript
import { getCldVideoUrl } from 'next-cloudinary';

const url = getCldVideoUrl({
  width: 960,
  height: 600,
  src: '<Public ID>'
});
```

--------------------------------

### Unsigned Upload with CldUploadButton

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadbutton/examples.mdx

Use this for uploads that do not require authentication. Ensure your upload preset has unsigned uploads enabled.

```jsx
import { useState } from 'react';
import { CldUploadButton } from '../../../next-cloudinary';
import styles from '../../styles/Docs.module.scss';

export const UnsignedUpload = () => {
  const [resource, setResource] = useState();
  return (
    <>
      <p>
        <CldUploadButton
          className={styles.button}
          onUpload={(result, widget) => {
            setResource(result?.info);
            widget.close();
          }}
          uploadPreset="next-cloudinary-unsigned"
        />
      </p>

      <p><strong>URL:</strong> { resource?.secure_url || 'Upload to see example result.' }</p>
    </>
  )
}
```

```jsx
<CldUploadButton
  uploadPreset="<Upload Preset>"
/>
```

--------------------------------

### Overlay Image with Blend Mode

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/examples.mdx

Apply blend modes to overlay images using the `appliedEffects` prop within the `overlays` configuration. This example uses the 'multiply' blend mode.

```jsx
import { CldImage } from 'next-cloudinary';

<CldImage
  width="960"
  height="600"
  crop="fill"
  src="<Your Public ID>"
  overlays={[{
    publicId: '<Your Public ID>',
    effects: [
      {
        crop: 'fill',
        gravity: 'auto',
        width: '1.0',
        height: '1.0',
      }
    ],
    flags: ['relative'],
    appliedEffects: [
      {
        multiply: true
      }
    ]
  }]}
  alt=""
  sizes="100vw"
/>
```

--------------------------------

### Consistent Thumb Crop with Source Option

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/guides/responsive-images.mdx

Apply the 'thumb' crop transformation to the source image before responsive resizing for consistent results. The `source: true` option ensures the crop is applied first.

```jsx
import { CldImage } from 'next-cloudinary';

<CldImage
  width="960"
  height="960"
  src="<Your Public ID>"
  crop={{
    type: 'thumb',
    source: true
  }}
  sizes="100vw"
  alt="Description"
/>
```

--------------------------------

### Generate URL for Metadata/OpenGraph Images

Source: https://context7.com/cloudinary-community/next-cloudinary/llms.txt

Provides an example of using `getCldImageUrl` within a Next.js `generateMetadata` function to dynamically create an OpenGraph image URL. This is useful for SEO and social sharing.

```jsx
import { getCldImageUrl } from 'next-cloudinary';

// For use in metadata, backgrounds, or any non-component context
export async function generateMetadata() {
  return {
    openGraph: {
      images: [getCldImageUrl({
        src: 'og-image',
        width: 1200,
        height: 630
      })]
    }
  };
}
```

--------------------------------

### Add Text Overlay with Effects

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/examples.mdx

Apply effects to text overlays by using the `effects` property within the overlay object. This example demonstrates applying a shear effect and controlling opacity.

```jsx
import { CldImage } from 'next-cloudinary';

<CldImage
  width="1335"
  height="891"
  src="<Your Public ID>"
  sizes="100vw"
  overlays={[{
    text: {
      color: 'white',
      fontFamily: 'Source Sans Pro',
      fontSize: 400,
      fontWeight: 'black',
      text: 'Touching Grass'
    },
    effects: [
      {
        shear: '40:0',
        opacity: 50
      }
    ]
  }]}
  alt=""
/>
```

--------------------------------

### Configure Cloudinary Environment

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/configuration.mdx

Use the `config` prop to set your Cloudinary cloud name and API key. Ensure these are replaced with your actual credentials.

```jsx
config={
  cloud: {
    cloudName: '<Your Cloud Name>',
    apiKey: '<Your API Key>'
  }
}
```

--------------------------------

### Generate OG Image URL with Background Removal and Underlay

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldogimageurl/examples.mdx

Removes the background of a source image and uses another image as the new background using `removeBackground` and `underlay` options. Requires the Cloudinary AI Background Removal add-on.

```jsx
import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';

const url = getCldOgImageUrl({
  src: '<Your Public ID>',
  removeBackground: true,
  underlay: '<Your Public ID>'
})

export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        width: 1200,
        height: 627,
        url
      }
    ]
  }
}
```

--------------------------------

### Image Effect Transformations

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/getcldimageurl/configuration.mdx

This section details various image effect transformations that can be applied to images using Cloudinary. Each transformation has a name, type, default value, example usage, and a link to more information.

```APIDOC
## Image Effect Transformations

### Description
This section details various image effect transformations that can be applied to images using Cloudinary. Each transformation has a name, type, default value, example usage, and a link to more information.

### Transformations:

- **contrast** (string) - '-' - `More Info`
- **distort** (string) - '-' - `150:340:1500:10:1500:1550:50:1000`, `arc:180.0` - `More Info`
- **fillLight** (boolean | string) - '-' - `true`, `70:20` - `More Info`
- **gamma** (boolean | string) - '-' - `true`, `100` - `More Info`
- **gradientFade** (boolean | string) - '-' - `true`, `symmetric:10,x_0.2,y_0.4` - `More Info`
- **grayscale** (bool) - '-' - `true` - `More Info`
- **improve** (boolean | string) - '-' - `true`, `50`, `indoor` - `More Info`
- **multiply** (bool) - '-' - `true` - `More Info`
- **negate** (bool) - '-' - `true` - `More Info`
- **oilPaint** (boolean | string) - '-' - `true`, `40` - `More Info`
- **opacity** (number/string) - '-' - `40` - `More Info`
- **outline** (boolean | string) - '-' - `true`, `40`, `outer:15:200` - `More Info`
- **overlay** (bool) - '-' - `true` - `More Info`
- **pixelate** (boolean | string) - '-' - `true`, `20` - `More Info`
- **pixelateFaces** (boolean | string) - '-' - `true`, `20` - `More Info`
- **pixelateRegion** (boolean | string) - '-' - `true`, `35,h_425,w_550,x_600,y_400` - `More Info`
- **redeye** (boolean | string) - '-' - `true` - `More Info`
```

--------------------------------

### Basic CldVideoPlayer Usage

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/examples.mdx

Standard Cloudinary Video Player with playback. Ensure you replace '<Your Public ID>' with your actual video's public ID.

```jsx
import { CldVideoPlayer } from 'next-cloudinary';

<CldVideoPlayer
  id="default"
  width="1620"
  height="1080"
  src="<Your Public ID>"
/>
```

--------------------------------

### Cloudinary Signed Upload API Endpoint

Source: https://context7.com/cloudinary-community/next-cloudinary/llms.txt

This is an example API endpoint (pages/api/sign-cloudinary-params.js) for generating Cloudinary signatures required for signed uploads. It uses the cloudinary SDK to sign the parameters provided in the request body.

```javascript
import { v2 as cloudinary } from 'cloudinary';

export default function handler(req, res) {
  const signature = cloudinary.utils.api_sign_request(
    req.body.paramsToSign,
    process.env.CLOUDINARY_API_SECRET
  );
  res.status(200).json({ signature });
}
```

--------------------------------

### Set Player Controls to True

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/configuration.mdx

Use the 'controls' prop to display player controls. Set to 'true' to enable.

```javascript
true
```

--------------------------------

### Add an Underlay

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the `underlays` prop to add an underlay to your image. The `publicId` is required.

```jsx
underlays={[{
  publicId: 'images/earth',
}]}
```

--------------------------------

### Apply Crop and Resize Transformation to Video

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldvideoplayer/transformations.mdx

Use the `transformation` prop with `CldVideoPlayer` to crop and resize videos. Set `width`, `height`, `crop: 'fill'`, and `gravity: 'auto'` for automatic subject tracking.

```jsx
import { CldVideoPlayer } from 'next-cloudinary';

<CldVideoPlayer
  id="cropping-resizing"
  width="500"
  height="500"
  src="<Your Public ID>"
  transformation={{
    width: 500,
    height: 500,
    crop: 'fill',
    gravity: 'auto'
  }}
/>
```

--------------------------------

### Configure Asset Type to Video

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the `assetType` property to specify the type of asset being delivered. Defaults to 'image' for CldImage.

```jsx
assetType="video"
```

--------------------------------

### Set Device Pixel Ratio (DPR)

Source: https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/cldimage/configuration.mdx

Use the `dpr` prop to specify the device pixel ratio for the image. This helps ensure sharp images on high-resolution displays. Example shows setting DPR to 2.0.

```jsx
dpr="2.0"
```