Missing "sizes" prop when using Next.js Image component

[walnutbread24]

I am following the example on the official site to use Next.js Image component.
example link: https://react-photo-album.com/examples/nextjs
However, I got this error for each image. it seems the sizes prop was not passed to NextJsImage.
mage with src "..." has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes
Any suggestion on how to solve this? Thank you.

[igordanchenko]

Thank you for catching this issue. The fix is now available in v2.0.4, and I've updated the example on the documentation website. To have the library produce the sizes attribute in this case, be sure to supply the sizes prop in the PhotoAlbum markup.

[walnutbread24]

Thank you for the fix. Would you mind shedding some light on how the `Image` component works as a renderer? What I find confusing is that I am providing `height` and `width` for each image in the `photos` prop to `PhotoAlbum`. If these are passed to `NextJsImage`, the `sizes` and `fill` are no longer needed and can be omitted. - Why in the example the `height` and `width` not used in favour of `sizes` and `fill`? Would the `PhotoAlbum` just calculate the container size for each instance of `NextJsImage` in this case? - Also, the format of values that can be passed to `NextJsImage` is different from the Next.js [documentation](https://nextjs.org/docs/api-reference/next/image#sizes). Is there some calculation involved on sizes in `PhotoAlbum`? Apologies if my understanding is flawed. I am not an expert in the 'Image' component.

[igordanchenko]

The reason why I'm providing an example using fill layout is that, to my knowledge, this implementation is compatible with all PhotoAlbum features.

You are more than welcome to use width and height instead of fill and sizes if that works in your case.

function NextJsImage({
    photo,
    imageProps: { alt, title, className, onClick },
    layout: { width, height },
    wrapperStyle,
}: RenderPhotoProps) {
    return (
        <Image
            src={photo}
            width={width}
            height={height}
            placeholder={"blurDataURL" in photo ? "blur" : undefined}
            style={{ ...wrapperStyle, height: "auto" }}
            {...{ alt, title, className, onClick }}
        />
    );
}

Just off the top of my head, this implementation won't work well with the breakpoints prop. Also, if my memory serves me well, this implementation was causing image flickering during browser window resize.

• Also, the format of values that can be passed to NextJsImage is different from the Next.js documentation. Is there some calculation involved on sizes in PhotoAlbum?

Yes, the format is intentionally different because PhotoAlbum uses each individual value in calculations, and parsing sizes string wasn't a trivial task within the scope of this library.