Next.js Image

You can use Next.js Image directly in MDX.

If the demo.png file is located at /public/demo.png, you can use the code below to display it:

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 unstable_staticImage: true.

Nextra also supports automatic static image imports, you no longer need to specify the width and height of the image manually, and you can directly use the Markdown syntax to display the same image:

![Hello](../../public/demo.png)

With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:


Nextra