Next.js Image
The standard way to use Next.js Image (opens in a new tab) 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
💡
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:
index.mdx
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:
