Merge pull request #403 from rightones/master

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

@@ -4,7 +4,7 @@ import * as React from 'react'
 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 {
   type MapImageUrlFn,
   type MapPageUrlFn,
@@ -205,8 +205,20 @@ export function NotionContextProvider({
     [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

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

readme.md

@@ -273,17 +273,17 @@ Another major factor for perf comes from images hosted by Notion. They're genera
 
 `NotionRenderer` also supports lazy image loading with optional low quality image placeholder previews. You can see a demo of this in practice [on this page](https://react-notion-x-demo.transitivebullsh.it/3492bd6dbaf44fe7a5cac62c5d402f06) which is using [lqip-modern](https://github.com/transitive-bullshit/lqip-modern) to pre-generate placeholder images that are inspired by Medium.com's image loading.
 
-If you're using Next.js, we recommend passing `next/image` and `next/link` to the renderer as follows:
+If you're using Next.js, we recommend passing `next/image` or `next/legacy/image`, and `next/link` to the renderer as follows:
 
 ```tsx
-import Image from 'next/image'
+import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
 import Link from 'next/link'
 
 export default ({ recordMap }) => (
   <NotionRenderer
     recordMap={recordMap}
     components={{
-      nextImage: Image,
+      nextImage: Image, // or nextLegacyImage: LegacyImage,
       nextLink: Link
     }}
   />
@@ -292,6 +292,8 @@ export default ({ recordMap }) => (
 
 This wraps these next.js components in a compatability layer so `NotionRenderer` can use them the same as their non-next.js equivalents `<img>` and `<a>`.
 
+Note that custom image component is currently only enabled with preview image or by turning on `forceCustomImages` of `NotionRenderer`.
+
 ## Related
 
 - [Next.js Template](https://github.com/transitive-bullshit/nextjs-notion-starter-kit) - The easiest way to deploy a self-hosted Notion site with Next.js and Vercel.