Image Optimization

Next Docs UI uses the built-in next/image component. You can enjoy the benefits of Next.js Image Optimization without extra configurations.

Under the hood, It gets the image size using rehype-img-size, then display it via next/image.

Usage

Use the <Image /> component from next-docs-ui/mdx. It wraps next/image and passes the default sizes property.

import { Image } from 'next-docs-ui/mdx'
 
<MDX
  components={{
    img: props => <Image {...props} />
  }}
/>

Example

Assume the image is under the /public folder.

![banner](/banner.png)