### Install ImageKit.io Next.js SDK

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/README.md

Install the SDK using npm or yarn. This command adds the necessary package to your project's dependencies.

```bash
npm install @imagekit/next
```

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

### Video with ImageKit provider

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Using ImageKit to serve videos. This example assumes the video is hosted on ImageKit and can be accessed via its URL.

```html
<video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video>
```

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

### Video without ImageKit provider

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Standard HTML5 video tag for playing videos. This example does not use ImageKit for video delivery or transformations.

```html
<video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video>
```

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

### Image with error handling

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

An image example demonstrating error handling. The 'data-imagekit-error' attribute is present, indicating a potential loading issue or error state.

```html
<img alt="Image with events" loading="lazy" width="300" height="300" decoding="async" data-nimg="1" style="color:red" srcset="https://ik.imagekit.io/demo/does-not-exists-show-call-on-error.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/does-not-exists-show-call-on-error.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/does-not-exists-show-call-on-error.jpg?tr=w-640,c-at_max" data-imagekit-error="true">
```

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

### Path-Based Transformation Position

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Configure transformations to be appended to the URL path instead of the query string by setting `transformationPosition="path"`. This example shows a resize transformation.

```tsx
import { Image } from "@imagekit/next";

// Path-based transformation position
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/demo.jpg"
  alt="Path transformation"
  width={400}
  height={300}
  transformationPosition="path"
  transformation={[{ width: 400, height: 300 }]}
/>
// Results in: https://ik.imagekit.io/your_imagekit_id/tr:w-400,h-300/demo.jpg
```

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

### Get Upload Auth Params for Next.js App Router

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Generate authentication parameters for client-side uploads using a server-side API route in Next.js App Router. Requires private and public keys.

```tsx
// app/api/upload-auth/route.ts (Next.js App Router API Route)
import { getUploadAuthParams } from "@imagekit/next/server";
import { NextResponse } from "next/server";

export async function GET() {
  const authParams = getUploadAuthParams({
    privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
    publicKey: process.env.IMAGEKIT_PUBLIC_KEY!,
    // Optional: custom token (defaults to UUID)
    // token: "custom-unique-token",
    // Optional: custom expiration in seconds (defaults to 30 minutes)
    // expire: Math.floor(Date.now() / 1000) + 60 * 60, // 1 hour
  });

  // Returns: { token: string, signature: string, expire: number }
  return NextResponse.json(authParams);
}
```

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

### Get Upload Auth Params for Next.js Pages Router

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Generate authentication parameters for client-side uploads using a server-side API route in Next.js Pages Router. Requires private and public keys.

```tsx
// pages/api/upload-auth.ts (Next.js Pages Router API Route)
import { getUploadAuthParams } from "@imagekit/next/server";
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const authParams = getUploadAuthParams({
    privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
    publicKey: process.env.IMAGEKIT_PUBLIC_KEY!,
  });

  res.status(200).json(authParams);
}
```

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

### Video with all props

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Demonstrates a video tag with multiple attributes including autoplay, loop, muted, playsinline, and a poster image, all served via ImageKit.

```html
<video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video>
```

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

### Fill Container with Custom Query Parameters

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Make an image fill its parent container by setting `fill={true}` and `sizes="100vw"`. You can also add custom query parameters to the URL.

```tsx
import { Image } from "@imagekit/next";

// Fill container with custom query parameters
<div style={{ position: "relative", width: "100%", height: 400 }}>
  <Image
    urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
    src="/background.jpg"
    alt="Background"
    fill={true}
    sizes="100vw"
    queryParameters={{ version: "v2", cache: "true" }}
  />
</div>
```

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

### Configure ImageKitProvider for Default Settings

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Use ImageKitProvider to set default configuration like urlEndpoint and transformationPosition for all nested Image and Video components. This avoids repetitive configuration.

```tsx
import { ImageKitProvider, Image, Video } from "@imagekit/next";

function App() {
  return (
    <ImageKitProvider
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      transformationPosition="query" // Optional: "query" (default) or "path"
    >
      {/* All nested Image and Video components inherit urlEndpoint */}
      <Image
        src="/hero-image.jpg"
        alt="Hero"
        width={800}
        height={400}
      />
      <Video
        src="/promo-video.mp4"
        controls
        width={640}
        height={360}
      />
    </ImageKitProvider>
  );
}
```

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

### Basic Image Component Usage

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Render an image with ImageKit by providing the urlEndpoint, src, alt text, width, and height. This is the most basic way to use the Image component.

```tsx
import { Image } from "@imagekit/next";

// Basic usage with explicit urlEndpoint
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/default-image.jpg"
  alt="Product image"
  width={500}
  height={500}
/>
```

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

### Video with transformations

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Apply transformations like height and width to a video served via ImageKit. This allows for resizing and other modifications.

```html
<video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video>
```

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

### Video with urlEndpoint override

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Serve a video from a different ImageKit URL endpoint by overriding the default. This is useful for managing multiple ImageKit accounts or configurations.

```html
<video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video>
```

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

### Responsive Image with srcset

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Use srcset to provide different image sizes for various screen resolutions. Ensure the image URL includes the appropriate transformation parameters.

```html
<img alt="Image with responsive off" loading="lazy" width="300" height="300" decoding="async" data-nimg="1" style="color:red" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max">
```

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

### Video with path transformation

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Apply transformations directly within the video path. This method allows for more complex path-based manipulations before the video is served.

```html
<video title="Video with path transformation" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/tr:h-100,w-100/sample-video.mp4"></video>
```

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

### Construct ImageKit URLs with Transformations

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Programmatically constructs ImageKit URLs with transformations. Useful for dynamic URL generation outside of React components. Supports basic URLs, transformations, path-based transformations, query parameters, and chained transformations.

```tsx
import { buildSrc } from "@imagekit/next";

// Basic URL construction
const imageUrl = buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/default-image.jpg",
});
// Output: https://ik.imagekit.io/your_imagekit_id/default-image.jpg

// URL with transformations
const transformedUrl = buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/product.jpg",
  transformation: [
    { width: 400, height: 300 },
    { quality: 80 },
    { format: "webp" }
  ],
});
// Output: https://ik.imagekit.io/your_imagekit_id/product.jpg?tr=w-400,h-300:q-80:f-webp

// Path-based transformation position
const pathBasedUrl = buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/image.jpg",
  transformation: [{ width: 200, height: 200, crop: "at_max" }],
  transformationPosition: "path",
});
// Output: https://ik.imagekit.io/your_imagekit_id/tr:w-200,h-200,c-at_max/image.jpg

// With query parameters
const urlWithParams = buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/asset.jpg",
  transformation: [{ width: 500 }],
  queryParameters: { version: "v2", updated: "2024" },
});
// Output: https://ik.imagekit.io/your_imagekit_id/asset.jpg?tr=w-500&version=v2&updated=2024

// Chained transformations
const chainedUrl = buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/photo.jpg",
  transformation: [
    { width: 800, height: 600 },
    { effectGray: true },
    { blur: 5 }
  ],
});

```

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

### Image with events and srcset

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

An image with event handling attributes and responsive srcset. The 'data-imagekit-loaded' attribute indicates successful loading.

```html
<img alt="Image with events" loading="lazy" width="300" height="300" decoding="async" data-nimg="1" style="color:red" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max" data-imagekit-loaded="true">
```

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

### Responsive Image with Sizes Attribute

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Configure the Image component to generate responsive srcset for different screen sizes using the sizes attribute. This ensures optimal image loading across devices.

```tsx
import { Image } from "@imagekit/next";

// Responsive image with sizes attribute
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/banner.jpg"
  alt="Responsive banner"
  width={1200}
  height={400}
  sizes="(max-width: 600px) 100vw, 50vw"
/>
```

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

### ImageKit Video Component with Ref for Control

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Enable programmatic control of video playback (play/pause) by forwarding a ref to the Video component.

```tsx
// Video with ref for programmatic control
function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const handlePlay = () => videoRef.current?.play();
  const handlePause = () => videoRef.current?.pause();

  return (
    <div>
      <Video
        ref={videoRef}
        urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
        src="/video.mp4"
        width={640}
        height={360}
        muted
        playsInline
      />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}
```

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

### Basic ImageKit Video Component Usage

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Use the Video component for basic video playback with ImageKit URL building. Ensure your urlEndpoint and src are correctly set.

```tsx
import { Video } from "@imagekit/next";
import { useRef } from "react";

// Basic video usage
<Video
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/sample-video.mp4"
  width={640}
  height={360}
  controls
/>
```

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

### Image Component with Event Handling

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Attach event handlers like `onLoad` and `onError` to the Image component for client-side interaction. Ensure this component is a client component by adding "use client".

```tsx
"use client"
import { Image } from "@imagekit/next";

// Event handling (client component)
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/image.jpg"
  alt="With events"
  width={300}
  height={300}
  onLoad={(e) => console.log("Image loaded", e.currentTarget.src)}
  onError={(e) => console.error("Failed to load image")}
/>
```

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

### ImageKit Video Component with Transformations

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Apply transformations to videos using the 'transformation' prop. This allows for resizing and quality adjustments.

```tsx
// Video with transformations
<Video
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/video.mp4"
  width={400}
  height={300}
  controls
  transformation={[
    { width: 400, height: 300 },
    { quality: 80 }
  ]}
/>
```

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

### Client-Side File Upload with ImageKit

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Handles client-side file uploads to ImageKit. Requires authentication parameters generated server-side. Supports various file types and upload options.

```tsx
"use client"
import { upload } from "@imagekit/next";
import type { UploadResponse } from "@imagekit/next";
import { useState } from "react";

function FileUploader() {
  const [uploadResult, setUploadResult] = useState<UploadResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleUpload = async (file: File) => {
    try {
      // Fetch auth params from your API route
      const authResponse = await fetch("/api/upload-auth");
      const { token, signature, expire } = await authResponse.json();

      // Upload the file
      const result = await upload({
        file,
        fileName: file.name,
        publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY!,
        signature,
        token,
        expire,
        // Optional parameters
        folder: "/uploads",
        tags: ["user-upload", "profile"],
        useUniqueFileName: true,
        // Abort controller for cancellation
        // abortSignal: abortController.signal,
      });

      setUploadResult(result);
      console.log("Upload successful:", result.url);
    } catch (err) {
      if (err instanceof Error) {
        setError(err.message);
      }
    }
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*,video/*"
        onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
      />
      {uploadResult && (
        <div>
          <p>Uploaded: {uploadResult.url}</p>
          <p>File ID: {uploadResult.fileId}</p>
        </div>
      )}
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

```

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

### Generate Responsive Image Attributes with getResponsiveImageAttributes

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Use this utility function to generate src, srcSet, and sizes attributes for standard HTML img elements or custom image components when not using the ImageKit Image component. Ensure you provide your ImageKit URL endpoint and the image source.

```tsx
import { getResponsiveImageAttributes } from "@imagekit/next";

const attributes = getResponsiveImageAttributes({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/responsive-image.jpg",
  transformation: [{ quality: 80 }],
  sizes: "(max-width: 768px) 100vw, 50vw",
  // devicePixelRatios: [1, 1.5, 2, 3],
  // breakpoints: [640, 750, 828, 1080, 1920],
});

// Use with standard img element
<img
  src={attributes.src}
  srcSet={attributes.srcSet}
  sizes={attributes.sizes}
  alt="Responsive image"
/>
```

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

### Unoptimized Image Mode

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Use `unoptimized={true}` to render the original, unoptimized file directly. This bypasses ImageKit's optimization and transformation pipeline.

```tsx
import { Image } from "@imagekit/next";

// Unoptimized mode (returns original file)
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/original.jpg"
  alt="Original file"
  width={800}
  height={600}
  unoptimized={true}
/>
```

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

### Generate ImageKit Transformation Strings

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Generates transformation strings for ImageKit URLs without constructing a full URL. Useful for generating transformation parameters to use with custom URL construction methods.

```tsx
import { buildTransformationString } from "@imagekit/next";

// Generate transformation string
const trString = buildTransformationString([
  { width: 400, height: 300 },
  { quality: 85 },
  { format: "auto" }
]);
// Output: "w-400,h-300:q-85:f-auto"

// Use with custom URL construction
const customUrl = `https://ik.imagekit.io/your_id/tr:${trString}/image.jpg`;

```

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

### ImageKit Image Component with Comprehensive Transformations

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

The Image component from @imagekit/next allows for detailed image transformations. You can chain multiple transformations including resizing, cropping, quality adjustments, effects, overlays, and named transformations. Specify width, height, and crop modes for precise control.

```tsx
import { Image } from "@imagekit/next";

// Comprehensive transformation examples
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/photo.jpg"
  alt="Transformed"
  width={600}
  height={400}
  transformation={[
    // Resize and crop
    {
      width: 600,
      height: 400,
      crop: "at_max",        // Crop modes: at_max, at_least, maintain_ratio, force, pad_resize
      cropMode: "pad_resize",
      focus: "auto",         // Focus: auto, face, center, top, bottom, left, right
      aspectRatio: "16-9",
    },
    // Quality and format
    {
      quality: 80,
      format: "auto",        // auto, webp, jpg, png, avif
      progressive: true,
    },
    // Effects
    {
      blur: 10,
      effectGray: true,
      effectContrast: true,
      effectSharpen: true,
    },
    // Overlays (watermarks, text)
    {
      overlayImage: "logo.png",
      overlayX: 10,
      overlayY: 10,
      overlayWidth: 100,
    },
    // Named transformations (presets)
    {
      named: "thumbnail-preset",
    },
    // Raw transformation string
    {
      raw: "w-200,h-200,fo-face",
    }
  ]}
/>
```

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

### Image Component with Transformations and Quality

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Apply ImageKit transformations like resizing and quality adjustments to an image. You can specify transformations in an array or use the direct quality prop.

```tsx
import { Image } from "@imagekit/next";

// With transformations (resize, quality, etc.)
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/product.jpg"
  alt="Transformed product"
  width={300}
  height={300}
  transformation=[
    { width: 300, height: 300 },
    { quality: 80 }
  ]
  quality={75} // Also available as a direct prop
/>
```

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

### ImageKit Video Component with Path Transformations

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Apply transformations directly within the video path by setting 'transformationPosition' to 'path'.

```tsx
// Video with path-based transformations
<Video
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/video.mp4"
  width={320}
  height={240}
  transformation={[{ width: 320, height: 240 }]}
  transformationPosition="path"
  controls
/>
```

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

### Full-Featured ImageKit Video Component

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Utilize all standard HTML5 video attributes along with ImageKit props for advanced video control and presentation.

```tsx
// Full-featured video with all HTML5 video attributes
<Video
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/promo.mp4"
  width={800}
  height={450}
  controls
  autoPlay
  loop
  muted
  playsInline
  preload="metadata"
  poster="https://ik.imagekit.io/your_imagekit_id/poster.jpg"
/>
```

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

### Image with silent loader

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

An image configured to ignore loader silently. This might be used when you want to prevent ImageKit from interfering with the default loading behavior.

```html
<img alt="Ignore loader silently" loading="lazy" width="300" height="300" decoding="async" data-nimg="1" style="color:red" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max">
```

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

### Image with specific transformation

Source: https://github.com/imagekit-developer/imagekit-next/blob/master/test-app/e2e/__snapshot__/pages.spec.ts/Pages-router-test-case-1.txt

Apply a specific transformation like 'n-restrict-unnamed' to an image. This is useful for applying custom rules or restrictions to image delivery.

```html
<img alt="Image with responsive off" loading="lazy" width="300" height="300" decoding="async" data-nimg="1" style="color:red" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed">
```

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

### ImageKit Image Component with AI Transformations

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Leverage AI-powered transformations with the Image component, such as background removal or generative fill for image extension. These features allow for advanced image editing directly within your Next.js application.

```tsx
import { Image } from "@imagekit/next";

// AI-powered transformations
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/portrait.jpg"
  alt="AI enhanced"
  width={500}
  height={500}
  transformation={[
    {
      // Background removal
      effectRemoveBg: true,
    },
    {
      // Or generative fill for extending images
      width: 800,
      height: 600,
      crop: "pad_resize",
      background: "gen_fill",
    }
  ]}
/>
```

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

### Disable Responsive Image Generation

Source: https://context7.com/imagekit-developer/imagekit-next/llms.txt

Set `responsive={false}` to disable automatic srcset generation. This is useful for scenarios like Restricted Unnamed Transformations where dynamic srcset is not desired.

```tsx
import { Image } from "@imagekit/next";

// Disable responsive srcset generation (useful for Restricted Unnamed Transformations)
<Image
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  src="/static-image.jpg"
  alt="Non-responsive image"
  width={400}
  height={400}
  transformation={[{ named: "my-preset" }]}
  responsive={false}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.