Next.js

If your project is based on Next.js, you may want to take advantage of the next/image component and next/dynamic import to minimize your bundle size.

next/dynamic

In most cases, the lightbox JS code and CSS stylesheets do not need to load with the initial page load, and loading can be postponed until a user starts interacting with your application. This fact creates an opportunity to reduce your initial load bundle size, which can help improve the speed and responsiveness of your application. To implement this approach in a Next.js project, you can extract the lightbox-related code and CSS stylesheets into a separate component and load it dynamically with the next/dynamic import.

The below example demonstrates the use of next/dynamic import.

CodeSandbox

Edit on CodeSandbox

next/image

The next/image component provides a more efficient way to handle images in your Next.js project. You can replace the standard <img> element with next/image via a custom render.slide function. The below example makes use of placeholder="blur" instead of showing a spinner.

import Image from "next/image";
import {
  isImageFitCover,
  isImageSlide,
  useLightboxProps,
} from "yet-another-react-lightbox/core";

export default function NextJsImage({ slide, rect }) {
  const { imageFit } = useLightboxProps().carousel;
  const cover = isImageSlide(slide) && isImageFitCover(slide, imageFit);

  const width = !cover
    ? Math.round(
        Math.min(rect.width, (rect.height / slide.height) * slide.width)
      )
    : rect.width;

  const height = !cover
    ? Math.round(
        Math.min(rect.height, (rect.width / slide.width) * slide.height)
      )
    : rect.height;

  return (
    <div style={{ position: "relative", width, height }}>
      <Image
        fill
        alt=""
        src={slide}
        loading="eager"
        placeholder="blur"
        draggable={false}
        style={{ objectFit: cover ? "cover" : "contain" }}
        sizes={`${Math.ceil((width / window.innerWidth) * 100)}vw`}
      />
    </div>
  );
}

import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

import NextJsImage from "../components/NextJsImage";

import image1 from "../../public/images/image01.jpeg";
import image2 from "../../public/images/image02.jpeg";
import image3 from "../../public/images/image03.jpeg";

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={[image1, image2, image3]}
  render={{ slide: NextJsImage }}
/>

Live Demo

CodeSandbox

Edit on CodeSandbox

With Zoom Plugin

Zoom plugin doesn't work well with the Next.js image component. You can use the following approach to take advantage of Next.js image optimization when using Zoom plugin.

import Lightbox from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import "yet-another-react-lightbox/styles.css";

import image1 from "../public/images/image01.jpeg";
import image2 from "../public/images/image02.jpeg";
import image3 from "../public/images/image03.jpeg";
// ...

const images = [
  image1,
  image2,
  image3,
  // ...
];

const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];

function nextImageUrl(src, size) {
  return `/_next/image?url=${encodeURIComponent(src)}&w=${size}&q=75`;
}

const slides = images.map(({ src, width, height }) => ({
  width,
  height,
  src: nextImageUrl(src, width),
  srcSet: imageSizes
    .concat(...deviceSizes)
    .filter((size) => size <= width)
    .map((size) => ({
      src: nextImageUrl(src, size),
      width: size,
      height: Math.round((height / width) * size),
    })),
}));

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides}
  plugins={[Zoom]}
/>

Live Demo

CodeSandbox

Edit on CodeSandbox