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({
  photo,
  imageProps: { alt, title, sizes, className, onClick },
  wrapperStyle,
}: RenderPhotoProps) {
  return (
    <div style={{ ...wrapperStyle, position: "relative" }}>
      <Image
        fill
        src={photo}
        placeholder={"blurDataURL" in photo ? "blur" : undefined}
        {...{ alt, title, sizes, className, onClick }}
      />
    </div>
  );
}

To have the library produce an accurate sizes attribute for each image, you must provide the sizes prop describing your photo album's width at various viewport conditions.

Examples:

• sizes={{ size: "100vw" }}
• sizes={{ size: "calc(100vw - 240px)" }}
• sizes={{ size: "calc(100vw - 240px)", sizes: [{ viewport: "(max-width: 960px)", size: "100vw" }] }}

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

export default function Gallery() {
  return (
    <PhotoAlbum
      layout="rows"
      photos={photos}
      renderPhoto={NextJsImage}
      defaultContainerWidth={1200}
      sizes={{ size: "calc(100vw - 240px)" }}
    />
  );
}

Live Demo

Sandbox

Source Code