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:

mdx

import Image from 'next/image'

<Image src="/demo.png" alt="Hello" width={500} height={500} />

Static Image

[!NOTE]

This feature is enabled via staticImage: true in the Nextra config by default.

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:

mdx

![Hello](/demo.png)

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