Integrating Cloudinary with Next.js

Next.js is a React.js-based web application framework that gives developers tools that extend React capabilities including data fetching and page rendering.

Cloudinary works complementary with Next.js allowing developers to take advantage of modern tooling while being able to build performant web apps with automatic optimization and use powerful media features like dynamic cropping and other transformations.

Using Cloudinary with Next.js

There are a few options for getting started with using Cloudinary in Next.js.

Next Cloudinary

Next Cloudinary is a community-built solution for using Cloudinary in a Next.js project. It includes tools like the CldImage component, social cards, and an upload widget.

Important: Community-developed libraries are developed, tested and maintained by the community. Bug fixes and feature requests should be submitted in the relevant repository.

The CldImage component wraps the Next.js Image component, extending the features with the power of Cloudinary tech.

This includes features beyond automatic optimization like dynamic cropping and resizing, background removal, and image and text overlays.

For basic usage, first install the package with:

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

Add your Cloudinary environment variables in `.env.local`:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

And use the component in your project:

import { CldImage } from 'next-cloudinary';
<CldImage
  width="600"
  height="600"
  src="<Public ID>"

The CldOgImage component uses the same APIs as CldImage to easily generate social media cards for your website.

And to easily upload images and videos to Cloudinary the CldUploadWidget is a drop-in solution that wraps the Cloudinary Upload Widget for Next.js.

Learn more about all of the features at: https://next-cloudinary.spacejelly.dev/

Next.js Image Component Cloudinary Loader

When using the built-in Next.js Image component, you can specify to use the Cloudinary Loader to deliver your images using Cloudinary with basic included features including resizing and optimization.

As of Next.js 13, you must configure the loader directly on the Image component:

<Image … loader={<Loader Function>} />

> Note: The Next Cloudinary library above handles this for you acting as a wrapper around the Next.js Image component.

Find a full example over on Github

Next.js Image Component Allowed Domain

You can use the Next.js Image component with Next.js features by adding Cloudinary as an “allowed domain”.

This does not rely on Cloudinary for delivery, but uses Next.js and the platform the project is deployed on to dynamically serve the Cloudinary-sourced image from a serverless function.

> Note: This isn’t our recommended solution as this prevents the Cloudinary CDN from fully functioning with the Next.js processing and delivery in front of the Cloudinary URL request.

In your `next.config.js` file add the following to your configuration:

images: {
  domains: ['res.cloudinary.com']
}

Find a full example over on Github

Cloudinary React SDK

Next.js is built on top of React.js which allows you to use the Cloudinary React SDK.

Learn more about the available components, widgets, and tools on the Cloudinary docs: https://cloudinary.com/documentation/react_integration

Or find examples on GitHub: https://github.com/colbyfayock/cloudinary-examples#react

More Resources

Learn more about how to use Cloudinary with Next.js:

• Build Performant, Engaging Experiences in Next.js with Next Cloudinary
• Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary
• How to Optimize Images with Responsive Sizes & AI Cropping in Next.js with Next Cloudinary
• Next Cloudinary Docs
• Cloudinary Next.js Examples