Next.js Image

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:


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


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 blury placeholder will be shown by default when loading the images: