How to use images from data models in next.js?

If you’re using images in pages and section, builder automates the image optimization process and there’s no need to do anything special in your code, this guide is for using images from data model entries, in this case you’d want to:

  • add cdn.builder.io to the list of images cdns in next.config.js
// next.config.js
  images: {
    domains: [ 'cdn.builder.io'],   
  }
  • Wrap Next/Image with a component with a loader method to tell next.js how to communicate with Builder’s Image API:
import Image from 'next/image'

const builderLoader = ({ src, width, height,  quality }) => {
  return `${src}?width=${width}&quality=${quality || 75}&height=${height}`
}

const BuilderImage = (props) => {
  return <Image loader={builderLoader} {...props} />
}

export default BuilderImage

Now you can use this component anywhere you’re rendering images from Builder:

    <BuilderImage
      width={2000}
      height={1000}
      src={content.data.author.image}
    />

1 Like