How to configure cloudinary with Cloudinary in Next Js

Cloudinary is a powerful cloud-based media management platform that simplifies the complexities of handling images and videos in web applications. Integrating Cloudinary with Next.js unlocks a myriad of features, from seamless uploading and dynamic transformations to efficient delivery, ensuring optimal performance and user experience.

Get Started

In this guide, we’ll delve into the process of configuring Cloudinary within your Next.js projects, empowering you to harness the full potential of media management in the cloud.

To get started you need to have a cloudinary account and you can get one using this link https://cloudinary.com/

Setup Dependencies

First install the cloudinary package for next js using your favorite package manager

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

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

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.

Read More

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