Installing Next Cloudinary

Getting Started

Installation

npm install next-cloudinary

Configuration

Add the following variable to your .env.local or .env file.

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Don't have a Cloudinary account? Sign up for free on cloudinary.com!

If using the Cloudinary Upload Widget and using Signed Uploads, you'll likely also want to also set your Cloudinary API Key and API Secret.

NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

The API Key is a publicly available value where the Secret must be kept private only to be used on the server.

Global Configuration

Here are all of the available configurable environment variables for Next Cloudinary:

Note: These are not all required to use the library.

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"
 
NEXT_PUBLIC_CLOUDINARY_SECURE_DISTRIBUTION="<Your Secure Distribution / CNAME>"
NEXT_PUBLIC_CLOUDINARY_PRIVATE_CDN="<true|false>"

Using Next Cloudinary

Learn how to add one of the Next Cloudinary components:

CldImage: Optimize Cloudinary images with ready-to-use transformations
CldOgImage: Easy-to-use OG Image and Social Media Cards
CldUploadButton: Drop-in button that opens the Cloudinary Upload Widget
CldUploadWidget: Cloudinary Upload Widget with a customizable UI
CldVideoPlayer: Deliver Cloudinary video assets with a customizable player

Or use the helper methods to generate URLs:

getCldImageUrl: Construct a Cloudinary image URL using the same API as CldImage
getCldOgImageUrl: Create a Cloudinary image URL specifically for OG Images or Social Media Cards

Next.js 13/14