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

Note

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

![Hello](/demo.png)

This loads the demo.png file inside the public folder, and automatically wraps it with Next.js <Image>.

💡

Tip

You can also use ![](../public/demo.png) 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:

Nextra