Add Next.js 13 new Image component support

Author: rightones

packages/react-notion-x/src/context.tsx

@@ -5,7 +5,7 @@ import { ExtendedRecordMap } from 'notion-types'
 import { AssetWrapper } from './components/asset-wrapper'
 import { Checkbox as DefaultCheckbox } from './components/checkbox'
 import { Header } from './components/header'
-import { wrapNextImage, wrapNextLink } from './next'
+import { wrapNextImage, wrapNextLegacyImage, wrapNextLink } from './next'
 import {
   MapImageUrlFn,
   MapPageUrlFn,
@@ -199,8 +199,20 @@ export const NotionContextProvider: React.FC<PartialNotionContext> = ({
     [themeComponents]
   )
 
-  if (wrappedThemeComponents.nextImage) {
+  if (
+    wrappedThemeComponents.nextImage &&
+    wrappedThemeComponents.nextLegacyImage
+  ) {
+    console.warn(
+      'You should not pass both nextImage and nextLegacyImage. Only nextImage component will be used.'
+    )
     wrappedThemeComponents.Image = wrapNextImage(themeComponents.nextImage)
+  } else if (wrappedThemeComponents.nextImage) {
+    wrappedThemeComponents.Image = wrapNextImage(themeComponents.nextImage)
+  } else if (wrappedThemeComponents.nextLegacyImage) {
+    wrappedThemeComponents.Image = wrapNextLegacyImage(
+      themeComponents.nextLegacyImage
+    )
   }
 
   if (wrappedThemeComponents.nextLink) {

packages/react-notion-x/src/next.tsx

@@ -10,6 +10,38 @@ export const wrapNextImage = (NextImage: any): React.FC<any> => {
     width,
     height,
 
+    className,
+
+    fill,
+
+    ...rest
+  }) {
+    if (fill === 'undefined') {
+      fill = !(width && height)
+    }
+
+    return (
+      <NextImage
+        className={className}
+        src={src}
+        alt={alt}
+        width={!fill && width && height ? width : undefined}
+        height={!fill && width && height ? height : undefined}
+        fill={fill}
+        {...rest}
+      />
+    )
+  }, isEqual)
+}
+
+export const wrapNextLegacyImage = (NextLegacyImage: any): React.FC<any> => {
+  return React.memo(function ReactNotionXNextLegacyImage({
+    src,
+    alt,
+
+    width,
+    height,
+
     className,
     style,
 
@@ -22,7 +54,7 @@ export const wrapNextImage = (NextImage: any): React.FC<any> => {
     }
 
     return (
-      <NextImage
+      <NextLegacyImage
         className={className}
         src={src}
         alt={alt}

packages/react-notion-x/src/types.ts

@@ -59,6 +59,7 @@ export interface NotionComponents {
 
   // optional next.js-specific overrides
   nextImage?: any
+  nextLegacyImage?: any
   nextLink?: any
 }