Next Cloudinary

High-performance image and video delivery and uploading at scale in Next.js powered by Cloudinary.

Automatically optimize images and videos and deliver in modern formats
Remove backgrounds from images
Dynamically add image and text overlays to images and videos
AI-based cropping and resizing
Transform images and videos using color and effects
Generate Open Graph Social Media cards on the fly
Drop-in Upload Widget
...all at scale with Cloudinary

<CldImage
  width="987"
  height="987"
  src="images/woman-headphones"
  sizes="50vw"
  crop="thumb"
  gravity="faces"
  removeBackground
  tint="40:253f8c"
  underlay="images/city-skyline"
  overlays={[
    {
      position: {
        gravity: 'north',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'MUSIC',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    },
    {
      position: {
        gravity: 'south',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'IS LIFE',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    }
  ]}
  alt="Image of woman with headphones transformed with Cloudinary"
/>

Installation