Next.js ImageKit SDK

npm install @imagekit/next
# or
yarn add @imagekit/next

//import Image from 'next/image'
import { Image } from '@imagekit/next';

export default function Page() {
  return (
    <Image
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id" // New prop
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

import { Image, ImageKitProvider } from '@imagekit/next';

export default function Page() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />
    </ImageKitProvider>
  )
}

import { Video } from '@imagekit/next';
export default function Page() {
  return (
    <Video
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      src="/video.mp4"
      controls
      width={500}
      height={500}
    />
  )
}

//import Image from 'next/image'
import { Image } from '@imagekit/next';

export default function Page() {
  return (
    <Image
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
      transformation={[{ width: 500, height: 500 }]}
    />
  )
}

import { Image } from '@imagekit/next';
export default function Page() {
  return (
    <Image
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
      loading="lazy" // Use "eager" to load immediately. `lazy` is the default value
    />
  )
}

"use client" // This component must be a client component
import { Image, buildSrc } from "@imagekit/next";
import { useState } from "react";
export default function Page() {
  const [showPlaceholder, setShowPlaceholder] = useState(true);
  return (
    <Image
      src="/default-image.jpg"
      alt="Next.js logo"
      width={400}
      height={400}
      loading="eager"
      style={showPlaceholder ? {
        backgroundImage: `url(${buildSrc({
          urlEndpoint: "https://ik.imagekit.io/ikmedia",
          src: "/default-image.jpg",
          transformation: [
            // {}, // Any other transformation you want to apply
            {
              quality: 10,
              blur: 90,
            }
          ]
        })})`,
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
      } : {}}
      onLoad={() => {
        setShowPlaceholder(false);
      }}
    />
  )
}

import { Video, buildSrc } from '@imagekit/next';
export default function Page() {
  return (
    <Video
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      src="/video.mp4"
      controls
      preload="none"
      poster={buildSrc({
        urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
        src: `/video.mp4/ik-thumbnail.jpg`, // Append ik-thumbnail.jpg after the video URL
      })}
    />
  )
}

import { Image } from '@imagekit/next';
export default function Page() {
  return (
    <Image
      urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
      transformation={[
        { width: 400, height: 300 },
        { rotation: 90 }
      ]}
    />
  )
}

import { Image, ImageKitProvider } from '@imagekit/next';

export default function ImageOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with image overlay"
        width={600}
        height={400}
        transformation={[
          { overlay: { type: "image", input: "logo.png" } }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function ImageOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with image overlay"
        width={600}
        height={400}
        transformation={[
          { 
            overlay: { 
              type: "image",
              input: "logo.png",
              transformation: [{ width: 100, height: 100 }] // Transformations for the overlay image and not the background image
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function ColorOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with solid color overlay"
        width={600}
        height={400}
        transformation={[
          { 
            overlay: { 
              type: "solidColor",
              color: "FF0000" 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function ColorOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with 100x100 solid color overlay"
        width={600}
        height={400}
        transformation={[
          { 
            overlay: { 
              type: "color",
              color: "FF0000",
              transformation: [
                { width: 100, height: 100 }
              ]
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function TextOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with text overlay"
        width={600}
        height={400}
        transformation={[
          { 
            overlay: { 
              type: "text", 
              text: "Hello, ImageKit!" 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';

export default function TextOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/background.jpg"
        alt="Background with text overlay"
        width={600}
        height={400}
        transformation={[
          { 
            overlay: { 
              type: "text", 
              text: "Hello, ImageKit!", 
              transformation: [
                { fontSize: 20, fontColor: "FF0000" } // Specify font size and color of the text
              ] 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Video, ImageKitProvider } from '@imagekit/next';

export default function VideoOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Video
        src="/background.mp4"
        controls
        transformation={[
          { 
            overlay: { 
              type: "video", 
              input: "overlay.mp4" 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Video, ImageKitProvider } from '@imagekit/next';
export default function VideoOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Video
        src="/background.mp4"
        controls
        transformation={[
          { 
            overlay: { 
              type: "video", 
              input: "overlay.mp4",
              timing: { start: 5, duration: 10 } // Overlay appears at 5 seconds and lasts for 10 seconds
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Video, ImageKitProvider } from '@imagekit/next';
export default function VideoOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Video
        src="/background.mp4"
        controls
        transformation={[
          { 
            overlay: { 
              type: "video", 
              input: "overlay.mp4",
              transformation: [
                { width: 100, height: 100 } // Transformations for the overlay video and not the background video
              ] 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Video, ImageKitProvider } from '@imagekit/next';

export default function SubtitleOverlayExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Video
        src="/background.mp4"
        controls
        transformation={[
          { 
            overlay: { 
              type: "subtitle", 
              input: "subtitle.srt" 
            } 
          }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';

export default function BackgroundRemovalExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/photo.jpg"
        alt="Photo with background removal"
        width={500}
        height={500}
        transformation={[
          { aiRemoveBackground: true }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function AIDropShadow() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/photo.jpg"
        alt="Photo with AI drop shadow"
        width={500}
        height={500}
        transformation={[
          { aiDropShadow: true }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';
export default function AIUpscaleExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/photo.jpg"
        alt="Photo with AI upscaling"
        width={500}
        height={500}
        transformation={[
          { aiUpscale: true }
        ]}
      />
    </ImageKitProvider>
  );
}

import { Image, ImageKitProvider } from '@imagekit/next';

export default function ArithmeticExample() {
  return (
    <ImageKitProvider urlEndpoint="https://ik.imagekit.io/your_imagekit_id">
      <Image
        src="/photo.jpg"
        alt="Photo with arithmetic width"
        width={300}
        height={200}
        transformation={[
          { width: "iw_div_2" }
        ]}
      />
    </ImageKitProvider>
  );
}

"use client" // This component must be a client component

import {
    ImageKitAbortError,
    ImageKitInvalidRequestError,
    ImageKitServerError,
    ImageKitUploadNetworkError,
    upload,
} from "@imagekit/next";
import { useRef, useState } from "react";

// UploadExample component demonstrates file uploading using ImageKit's Next.js SDK.
const UploadExample = () => {
    // State to keep track of the current upload progress (percentage)
    const [progress, setProgress] = useState(0);

    // Create a ref for the file input element to access its files easily
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Create an AbortController instance to provide an option to cancel the upload if needed.
    const abortController = new AbortController();

    /**
     * Authenticates and retrieves the necessary upload credentials from the server.
     *
     * This function calls the authentication API endpoint to receive upload parameters like signature,
     * expire time, token, and publicKey.
     *
     * @returns {Promise<{signature: string, expire: string, token: string, publicKey: string}>} The authentication parameters.
     * @throws {Error} Throws an error if the authentication request fails.
     */
    const authenticator = async () => {
        try {
            // Perform the request to the upload authentication endpoint.
            const response = await fetch("/api/upload-auth");
            if (!response.ok) {
                // If the server response is not successful, extract the error text for debugging.
                const errorText = await response.text();
                throw new Error(`Request failed with status ${response.status}: ${errorText}`);
            }

            // Parse and destructure the response JSON for upload credentials.
            const data = await response.json();
            const { signature, expire, token, publicKey } = data;
            return { signature, expire, token, publicKey };
        } catch (error) {
            // Log the original error for debugging before rethrowing a new error.
            console.error("Authentication error:", error);
            throw new Error("Authentication request failed");
        }
    };

    /**
     * Handles the file upload process.
     *
     * This function:
     * - Validates file selection.
     * - Retrieves upload authentication credentials.
     * - Initiates the file upload via the ImageKit SDK.
     * - Updates the upload progress.
     * - Catches and processes errors accordingly.
     */
    const handleUpload = async () => {
        // Access the file input element using the ref
        const fileInput = fileInputRef.current;
        if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
            alert("Please select a file to upload");
            return;
        }

        // Extract the first file from the file input
        const file = fileInput.files[0];

        // Retrieve authentication parameters for the upload.
        let authParams;
        try {
            authParams = await authenticator();
        } catch (authError) {
            console.error("Failed to authenticate for upload:", authError);
            return;
        }
        const { signature, expire, token, publicKey } = authParams;

        // Call the ImageKit SDK upload function with the required parameters and callbacks.
        try {
            const uploadResponse = await upload({
                // Authentication parameters
                expire,
                token,
                signature,
                publicKey,
                file,
                fileName: file.name, // Optionally set a custom file name
                // Progress callback to update upload progress state
                onProgress: (event) => {
                    setProgress((event.loaded / event.total) * 100);
                },
                // Abort signal to allow cancellation of the upload if needed.
                abortSignal: abortController.signal,
            });
            console.log("Upload response:", uploadResponse);
        } catch (error) {
            // Handle specific error types provided by the ImageKit SDK.
            if (error instanceof ImageKitAbortError) {
                console.error("Upload aborted:", error.reason);
            } else if (error instanceof ImageKitInvalidRequestError) {
                console.error("Invalid request:", error.message);
            } else if (error instanceof ImageKitUploadNetworkError) {
                console.error("Network error:", error.message);
            } else if (error instanceof ImageKitServerError) {
                console.error("Server error:", error.message);
            } else {
                // Handle any other errors that may occur.
                console.error("Upload error:", error);
            }
        }
    };

    return (
        <>
            {/* File input element using React ref */}
            <input type="file" ref={fileInputRef} />
            {/* Button to trigger the upload process */}
            <button type="button" onClick={handleUpload}>
                Upload file
            </button>
            <br />
            {/* Display the current upload progress */}
            Upload progress: <progress value={progress} max={100}></progress>
        </>
    );
};

export default UploadExample;

buildSrc({
  urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
  src: "/photo.jpg",
  transformation: [
    { unsupportedTransformation: "value" }
  ]
});
// Output: https://ik.imagekit.io/your_imagekit_id/photo.jpg?tr=unsupportedTransformation-value