Next.js Image

If your project is based on Next.js and you'd like to use the next/image component instead of the standard <img> element, you can easily accomplish this with the renderPhoto function:

import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";

export default function NextJsImage({
    imageProps: { src, alt, title, sizes, className, onClick },
    wrapperStyle,
}: RenderPhotoProps) {
    return (
        <div style={wrapperStyle}>
            <div style={{ position: "relative", width: "100%", height: "100%" }}>
                <Image
                    fill
                    src={src}
                    alt={alt}
                    title={title}
                    sizes={sizes}
                    className={className}
                    onClick={onClick}
                />
            </div>
        </div>
    );
}

import PhotoAlbum from "react-photo-album";
import NextJsImage from "./NextJsImage";
import photos from "./photos";

export default function Gallery() {
    return <PhotoAlbum layout="columns" photos={photos} renderPhoto={NextJsImage} />;
}