Next Cloudinary

  • Original

  • Thumbnail with Auto Gravity

    <CldImage
  width="987"
  height="987"
  src="images/woman-headphones"
  sizes="100vw"
  crop="thumb"
  gravity="faces"
  removeBackground
  tint="40:253f8c"
  underlays={[{
    publicId: 'images/city-skyline',
    width: 987,
    height: 987,
    crop: 'fill'
  }]}
/>

Getting Started

Installation

Install the package by running:

yarn add next-cloudinary
# or
npm install next-cloudinary

Add an environment variable inside of your `.env.local`, `.env`, or deployment platform:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Usage

Then import into your project with:

import { CldImage } from 'next-cloudinary';

From a basic usage, you can set up your image just like the original Next.js Image component but using your cloudinray Public ID as the src:

<CldImage
  width="<Width>"
  height="<Height>"
  src="<Public ID>"
/>

Examples

Effects

  • Background Removal

    removeBackground

    Note: Background removal requires the Cloudinary AI Background Removal Add-On

  • Zoom & Pan

    zoompan="loop"

  • Blur

    blur="1200"

  • Pixelate

    pixelate

  • Grayscale

    grayscale

  • Tint

    tint="equalize:80:blue:blueviolet"

See all supported effects on github.com.

Cropping

  • Original

  • Thumbnail with Auto Gravity

    crop="thumb"
gravity="auto"

  • Thumbnail with Faces Gravity

    crop="thumb"
gravity="faces"

Placeholders

  • Blur

    placeholder="blur"

  • Grayscale

    placeholder="grayscale"

  • Color

    placeholder="color:blueviolet"

Image Overlays

  • Overlay Image by Public ID

    overlays={[{
  publicId: 'images/earth',
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  effects: [
    {
      crop: 'fill',
      gravity: 'auto',
      width: 500,
      height: 500
    }
  ]
}]}

Image Underlays

  • Background Removal with Underlay

    removeBackground
underlays={[{
  publicId: 'images/galaxy',
  width: 1920,
  height: 1200,
  crop: 'fill'
}]}

    Note: Background removal requires the Cloudinary AI Background Removal Add-On

Text Overlays

  • Text Overlay

    overlays={[{
  width: 2670 - 20,
  crop: 'fit',
  position: {
    x: 10,
    y: 10,
    gravity: 'north_west',
  },
  text: {
    color: 'blueviolet',
    fontFamily: 'Source Sans Pro',
    fontSize: 120,
    fontWeight: 'bold',
    textDecoration: 'underline',
    letterSpacing: 14,
    text: 'Cool Beans'
  }
}]}