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 PhotoAlbum from "react-photo-album";
import NextJsImage from "./NextJsImage";
import photos from "./photos";

const Gallery = () => <PhotoAlbum layout="columns" photos={photos} renderPhoto={NextJsImage} />;

Next.js 13

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

const NextJsImage: React.FC<RenderPhotoProps> = ({
    imageProps: { src, alt, title, sizes, className, onClick },
    wrapperStyle,
}) => (
    <div style={wrapperStyle}>
        <div style={{ display: "block", position: "relative", width: "100%", height: "100%" }}>
            <Image fill src={src} alt={alt} title={title} sizes={sizes} className={className} onClick={onClick} />
        </div>
    </div>
);

export default NextJsImage;

Next.js 12 and earlier

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

const NextJsImage: React.FC<RenderPhotoProps> = ({
    imageProps: { src, alt, title, sizes, className, onClick },
    wrapperStyle,
}) => (
    <div style={wrapperStyle}>
        <div style={{ display: "block", position: "relative", width: "100%", height: "100%" }}>
            <Image layout="fill" src={src} alt={alt} title={title} sizes={sizes} className={className} onClick={onClick} />
        </div>
    </div>
);

export default NextJsImage;