Programmable Media

Configure the Next.js SDK (video tutorial)

Last updated: Sep-12-2024

Overview

Learn how to install and configure the community-developed Cloudinary Next.js SDK in your Next.js environment, and deliver an image from Cloudinary using the CldImage component.

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  0:00 The community-developed Cloudinary Next.js SDK gives you a way to handle images and videos at scale, providing transformation, optimization and delivery capabilities that you can integrate seamlessly into your existing Next.js application. You can also use the Node.js SDK for server-side functionality.

Install the Next.js SDK

Jump to this spot in the video  1:12 To install the Cloudinary Next.js SDK, in a terminal run:

Configure Cloudinary

Jump to this spot in the video  1:21 To configure the SDK for your product environment, you can set the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME environment variable to your cloud name in your .env.local file:

Deliver an image from Cloudinary

Jump to this spot in the video  1:34 Use the CldImage component of the Next Cloudinary SDK to display an image from your Cloudinary product environment. The component takes a public ID as a prop, together with a width, height and alt text for the image. This automatically gives you an image that's optimized for format and quality, and enables you to use transformations, such as background removal (add-on required).

Keep learning

Related topics

If you like this, you might also like...

Optimization Tips
Tips for delivering optimized images
Create Social Media Cards in Next.js
Dynamically create social media image cards using Next.js
Optimize Videos in Next.js
Optimize delivery of videos in a Next.js app

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: