+
{}}
+ style={{ display: "none" }}
+ >
+
Hi! This is an ImageKit Next.js SDK Demo!
+
+
+ Directly using IkImage
+
+
+
+
Dynamic transformation update directly using IKImage
+
+
+
+
+
+
Click here to apply transformations on the above image
+
+
+
+
+
+ Using context ImageKitProvider
+
+
+ Let's add an Image
+
+
+ Transformation - height and width manipulation
+
+
+
+
+
Click here to apply max radius on above image
+
+
+ Chained transformation
+
+
+
+
+ Lazy loading image
+
+
+
+
+ Progressive image loading wihtout lazy loading
+
+ {}}
+ lqip={{ active: true, quality: 20, blur: 10 }}
+ alt="test-image"
+ />
+
+
+ Progressive image loading with lazy loading
+
+
+
+ File upload along with upload API options - To use this funtionality please remember to setup the server
+
+ {isUploading !== null ? (
+
+ {isUploading
+ ? `...Uploading (${
+ uploadProgress ? (uploadProgress.type ? ((uploadProgress.loaded / uploadProgress.total) * 100).toFixed(2) + "%)" : "") : ""
+ }`
+ : uploadedImageSource}
+
+ ) : (
+ <>
+ )}
+ {isUploading ? (
+
+ ) : (
+ <>
+ )}
+ Custom Upload Button
+ {reftest && }
+
+ Your above uploaded file will appear here
+ {uploadedImageSource && (
+
+
+
+ )}
+
+ Upload invalid file
+
+
+ {error && error.hasOwnProperty("uploadFileErr") && (
+
+ {"File upload failed."}
+
+ )}
+
+
+
+ Video Element
+
+
+
+ Video with some advance transformation
+
+
+
](https://imagekit.io)
+
+# ImageKit.io Next.js SDK
+
+[](https://github.com/imagekit-developer/imagekit-next/)
+[](https://www.npmjs.com/package/imagekitio-next)
+[](https://opensource.org/licenses/MIT)
+[](https://twitter.com/ImagekitIo)
+
+ImageKit Next.js SDK allows you to resize, optimize, deliver, and upload images and videos in your Next.js application.
+
+[ImageKit](https://imagekit.io) is a complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
+
+## Installation
+
+Add `imagekitio-next` to your project by executing one of the following commands:
+
+```shell
+npm install --save imagekitio-next
+```
+
+or
+
+```shell
+yarn add imagekitio-next
+```
+
+## Usage
+
+### Initialization
+
+Import components in your code:
+
+```js
+import { IKImage, IKVideo, ImageKitProvider, IKUpload, ImageKitContext } from 'imagekitio-next'
+```
+
+### Pages Router (/src)
+
+By default, `imagekitio-next` fully supports the included components in the `src` directory without any additional setup.
+
+### App Router (/app)
+
+The components in the app directory are, by default, React Server-Side Components (RSCs), but not everything can be done server-side. That's where Client components come in.
+
+`imagekitio-next` provides components that operate exclusively on the client side.
+
+When using the SDK for the first time, you might enter either of the following errors.
+
+`Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function`
+
+or
+
+`You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.`
+
+To simply fix this, you can force the component or the page to operate solely on Client Side by adding "use client"; directive at the start of the file, you can read more about it here [Using Client Components in Next.js](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs).
+
+### Allowing images to be loaded from trusted external URLs
+
+To protect your application from malicious users, configuration is required to use external images. The `remotePatterns` configuration in Next.js specifies the sources allowed to load images via external URLs. This enhances security by preventing unauthorized image sources, which could potentially expose the application to vulnerabilities like cross-site scripting (XSS) or data theft. By defining a whitelist of trusted image sources, developers can ensure that only images from these sources are loaded, thereby safeguarding the application. For more details, refer to the [Next.js documentation](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns).
+
+`next.config.js`
+```js
+module.exports = {
+ images: {
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "ik.imagekit.io",
+ port: '',
+ },
+ ],
+ },
+}
+```
+
+
+### Examples
+
+#### Image & video rendering and transformations
+```js
+