You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: readme.md
+5-3Lines changed: 5 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -271,17 +271,17 @@ Another major factor for perf comes from images hosted by Notion. They're genera
271
271
272
272
`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.
273
273
274
-
If you're using Next.js, we recommend passing `next/image` and `next/link` to the renderer as follows:
274
+
If you're using Next.js, we recommend passing `next/image`or `next/legacy/image`, and `next/link` to the renderer as follows:
275
275
276
276
```tsx
277
-
importImagefrom'next/image'
277
+
importImagefrom'next/image'// or import Image from 'next/legacy/image' if you use legacy Image
278
278
importLinkfrom'next/link'
279
279
280
280
exportdefault ({ recordMap }) => (
281
281
<NotionRenderer
282
282
recordMap={recordMap}
283
283
components={{
284
-
nextImage: Image,
284
+
nextImage: Image,// or nextLegacyImage: LegacyImage,
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>`.
292
292
293
+
Note that custom image component is currently only enabled with preview image or by turning on `forceCustomImages` of `NotionRenderer`.
294
+
293
295
## Related
294
296
295
297
-[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.
0 commit comments