Next.js Image
The standard way to use Next.js Image inside MDX is to directly import the component:
MDX
import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={500} />Static Image
💡
This feature is enabled via staticImage: true in the Nextra config by
default.
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:
Markdown
This loads the demo.png file inside the public folder, and automatically
wraps it with Next.js <Image>.
You can also use  to load the image from a relative
path, if you don't want to host it via public.
With Next.js Image, there will be no layout shift, and a beautiful blurry placeholder will be shown by default when loading the images:
