NaN Error When Using Next.js Image Component

[brince0304]

Description

We are experiencing an issue when integrating the Next.js Image component. Specifically, we're encountering a NaN (Not a Number) error that prevents images from rendering correctly. This occurs when attempting to set the width and height of images dynamically.

Here's a screenshot illustrating the error:

While we can work around this issue by manually setting fixed dimensions, as shown in the code snippet below:

function NextImageComponent(props: ImageProps) {
  return (
    <Image
      src={props.src}
      alt={props.alt}
      title='notion-image'
      width={1200}
      height={800}
      loading="lazy"
    />
  );
}

We believe it should be possible to use the Next.js Image component directly with React Notion X without any additional processing or manual dimension setting. The integration should be seamless, allowing us to pass the Next.js Image component to React Notion X and have it work correctly out of the box.

Upon investigation, we've found that the error can occur if the size properties of the previewImage are not properly defined.

Questions

1. Are there any properties that need to be predefined separately to resolve this error?
2. Is there a recommended approach to integrate Next.js Image component with React Notion X that avoids this NaN error?
3. Are there any known issues or limitations when using Next.js Image with React Notion X that we should be aware of?

Additional Information

• We consistently encounter this error when rendering any page that includes images.
• We're using the latest versions of React Notion X and Next.js as of this writing.

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you for your assistance!

Notion Test Page ID

We have not included a specific test page ID as this error occurs consistently across all pages containing images. However, if a specific test page would be helpful for debugging, please let us know and we can provide one.