Using Next Image with Thumbnail plugin

[thefinnomenon]

Is your feature request related to a problem? Please describe.

I am using Next Image for the album view as well as the slider but the thumbnails are loading the full sized images. Could you provide an example of using the Thumbnail plugin with the Next Image component please?

Describe the solution you'd like

The thumbnails in the slider should use Next Image to load a smaller version of the original images.

Describe alternatives you've considered

No response

Additional context

No response

[igordanchenko]

You can re-use the same NextJsImage component for the thumbnail, just need to specify it as a render.thumbnail render function.

<Lightbox
    open={open}
    close={() => setOpen(false)}
    slides={slides}
    plugins={[Thumbnails]}
    render={{ slide: NextJsImage, thumbnail: NextJsImage }}
/>

[thefinnomenon]

Thanks, that worked perfectly! I think it would be worth adding this to the docs in the Next section.

[igordanchenko]

Feel free to submit a PR 🤝

Here is the source of the Next.js docs page - https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/docs/examples/nextjs.md

I'll also re-open this discussion to make it more visible and easier to find.