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 React from "react";
import Image from "next/image";
import { PhotoProps } from "react-photo-album";

type NextJsImageProps = PhotoProps & { wrapperProps?: React.HTMLAttributes<HTMLDivElement> };

const NextJsImage = ({ photo, imageProps, wrapperProps }: NextJsImageProps) => {
    const { width, height } = photo;
    const { src, alt, title, style, sizes, className, onClick } = imageProps;
    const { style: wrapperStyle, ...restWrapperProps } = wrapperProps ?? {};

    return (
        <div
            style={{
                width: style.width,
                padding: style.padding,
                marginBottom: style.marginBottom,
                ...wrapperStyle
            }}
            {...restWrapperProps}
        >
            <Image
                src={src}
                alt={alt}
                title={title}
                sizes={sizes}
                width={width}
                height={height}
                className={className}
                onClick={onClick}
            />
        </div>
    );
};

export default NextJsImage;

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

<PhotoAlbum layout="columns" photos={photos} renderPhoto={NextJsImage} />