Skip to content

Commit 4273caf

Browse files
committed
Update readme.md
1 parent ca51ba9 commit 4273caf

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

readme.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -271,17 +271,17 @@ Another major factor for perf comes from images hosted by Notion. They're genera
271271

272272
`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.
273273

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:
275275

276276
```tsx
277-
import Image from 'next/image'
277+
import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
278278
import Link from 'next/link'
279279

280280
export default ({ recordMap }) => (
281281
<NotionRenderer
282282
recordMap={recordMap}
283283
components={{
284-
nextImage: Image,
284+
nextImage: Image, // or nextLegacyImage: LegacyImage,
285285
nextLink: Link
286286
}}
287287
/>
@@ -290,6 +290,8 @@ export default ({ recordMap }) => (
290290

291291
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>`.
292292

293+
Note that custom image component is currently only enabled with preview image or by turning on `forceCustomImages` of `NotionRenderer`.
294+
293295
## Related
294296

295297
- [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

Comments
 (0)