• Installation

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>"

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"
/>

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

Last updated on December 2, 2022