Front-End Development Mastering Image Alignment: Centering Images with HTML & CSS Adding Video to Your React Native App with react-native-video HTML Image Slider: Do It Yourself and 1-Step Image Gallery Widget How to Effectively Manage Digital Assets in a PHP Image Gallery Introducing Angular Image Editor: Your New Editing Too Mastering Javascript Image Annotation Mastering JavaScript Image Popup Python Video Player: 3 Free Options and a Quick Tutorial Image Recognition Machine Learning: Use Cases and Common Algorithms HTML/CSS: How to Center Images Vertically and Horizontally How to Create an Image Map Understand CSS Background Position with 4 Simple Examples Java for Image Processing: 4 Libraries You Should Know Python Video Processing: 6 Useful Libraries and a Quick Tutorial Blur Image CSS: Two Ways to Blur Images for Gorgeous Effects Designing a Video Flipping App for Android Build an App for Embedding Video Watermarks on Android Devices Change Image on Hover with HTML and CSS How to Align Images with CSS Full Page Background Image with CSS: Tutorial and 5 Automation Tips Using CSS to Scale Page Elements and a Better Way to Scale Your Images CSS Background Image: Quick Tutorial and 3 Automation Tips Featured Image: Best Practices to Feature Images on Your Website Image Gallery Websites: Tips and Tricks for a Stunning Image Gallery 6 Ways to Stretch a Background Image with CSS Auto Cropping for Images and Video: Features & Best Practices FLAC vs. WAV: 4 Key Differences and How to Choose Converting Audio to Video: A Practical Guide FLAC vs. AIFF: 5 Key Differences and How to Choose FLAC vs. MQA: 5 Key Differences and How to Choose Converting WAV Files To OGG The Ultimate Guide On Converting OGG Files To WAV Sound Choices: FLAC vs. MP3 AAC vs MP3 – The Future of Audio Files All about AIFF and how it compares to WAV and MP3 Integrating Cloudinary with Netlify Integrating Cloudinary with Svelte and SvelteKit Integrating Cloudinary with Nuxt Integrating Cloudinary with Gatsby File Upload as a Service: How It Works and 5 Leading Solutions Native Mobile App Development Creative Uses for CSS Inner Border and 3 Ways to Set a Border Integrating Cloudinary with Next.js Front-End Development: The Complete Guide

Integrating Cloudinary with Next.js

cloudinary nextjs

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

“Front

More Resources

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

Last updated: Nov 23, 2023