Next.js Image

The standard way to use Next.js Image 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

⚠️

You need to opt-in to this feature by enabling unstable_staticImage: true.

Nextra supports automatically optimize your static image imports with the Markdown syntax. You no longer need to specify the width and height of the image manually, but directly use the ![]() syntax to display the same image:

index.mdx

![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