Next.js Image
The standard way to use Next.js Image inside MDX is to directly import the component:
import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={500} />Static Image
⚠️
You need to opt-in to this feature by enabling staticImage: true.
Nextra supports automatically optimizing your static image imports with the Markdown syntax. You do not need to specify the width and height of the image, just use the ![]() Markdown syntax:
With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
