Installing Next Cloudinary

Install next-cloudinary with:

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

Add an environment variable with your Cloud Name:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

The CldUploadButton and CldUploadWidget make use of an prop called uploadPreset. If new to upload presets, or are looking for guidance on how to edit/retrieve your existing preset(s), refer to this guide.

Don't have a Cloudinary account? Sign up for free!

CldImage

Import the CldImage component:

import { CldImage } from 'next-cloudinary';

Add the CldImage component pointing to a Cloudinary public ID:

<CldImage
  width="960"
  height="600"
  src="images/turtle"
  sizes="100vw"
  alt="Turtle in the ocean"
/>

More Resources

CldOgImage

Import the CldOgImage component:

import { CldOgImage } from 'next-cloudinary';

Add the CldOgImage component in your page outside of the Head component pointing to a Cloudinary public ID:

<CldOgImage
  src="images/galaxy"
  text={{
    text: 'Next Cloudinary',
    color: 'white'
  }}
/>

CldOgImage does not render an <img> tag, meaning it can't be visually embedded on a page. The following examples make use of the <CldImage> tag to showcase what's possible.

<meta property="og:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1200,g_center/l_text:Arial_200_bold:Installation,co_white/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/images/galaxy" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1200,g_center/l_text:Arial_200_bold:Installation,co_white/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/images/galaxy" />
<meta property="og:image:width" content="2400" />
<meta property="og:image:height" content="1200" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1200,g_center/l_text:Arial_200_bold:Installation,co_white/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/images/galaxy" />

More Resources

Getting Started Basic Usage