NextImage-Loader

Overview

The NextImage component is a custom image loader for Next.js applications. It provides a progressive image loading experience by initially displaying a blurred version of the image and gradually removing the blur effect.

Installation

1. Set up a Next.js project If you don't have a Next.js project, create one using the following command:

Create_Next_App.bash
npx create-next-app my-next-app

2. Add necessary dependencies Navigate to your project directory and install the required dependencies:

Add_Dependencies.bash
npm install clsx tailwind-merge

3. Create a utility function Create a new file at lib/utils.ts and add the following code:

lib/utils.ts
import { twMerge } from "tailwind-merge";
import { type ClassValue, clsx } from "clsx";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

NextImage Component

4. Create the NextImage component Create a new file at components/NextImage.tsx and add the following code:

components/NextImage.tsx
"use client";

import { cn } from "@/lib/utils";
import React, { useState } from "react";
import Image, { ImageProps } from "next/image";

const blurImage = [
    "blur-3xl",
    "blur-2xl",
    "blur-xl",
    "blur-lg",
    "blur-md",
    "blur-sm",
    "blur-none",
];

interface NextImageProps extends Omit<ImageProps, "className" | "onLoad"> {
    alt: string;
    className?: string;
}

export default function NextImage({ className, alt, ...props }: NextImageProps) {
    const [blurImageProp, setBlurImageProp] = useState("blur-3xl");

    return (
        <Image
            {...props}
            alt={alt}
            blurDataURL={props.src as string}
            className={cn(className, blurImageProp)}
            onLoad={() => {
            let i = 0;
                const interval = setInterval(() => {
                    setBlurImageProp(blurImage[i]);
                    i++;
                    if (i === blurImage.length) {
                        clearInterval(interval);
                    }
                }, 75);
            }}
        />
    );
}

Usage

5. Import and use the NextImage component Import the NextImage component into the file where you want to use it, for example, pages/index.tsx:

index.tsx
import React from "react";
import NextImage from "@/components/NextImage";

    const ExamplePage = () => {
        return (
            <div className="overflow-hidden">
                <NextImage
                    src="/path/to/your/image.jpg"
                    alt="Description of the image"
                    width={600}
                    height={400}
                    className="custom-class"
                />
            </div>
        );
    };

export default ExamplePage;

Styling

6. Add custom CSS classes You can pass additional class names through the className prop to style the image. For example, in your CSS file:

custom-class.css
.custom-class {
        border-radius: 8px;
}

How It Works

The NextImage component utilizes the useState hook to manage the blur effect class. When the image loads, an interval updates the blur class sequentially, creating a progressive loading effect.

Key Features

• Progressive Blur Removal: The image starts with a heavy blur and gradually becomes clear.
• Responsive Design: Utilizes Next.js's Image component for optimized and responsive image loading.
• Easy Integration: Simple component for quick integration into any Next.js project.

Conclusion

The NextImage component is a powerful yet simple tool for enhancing image loading in your Next.js applications. By following the steps outlined, you can easily integrate and customize the component to fit your project's needs.