> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure the Next.js SDK (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-cldimage

## Overview

Learn how to install and configure the [Cloudinary Next.js SDK](nextjs_integration) in your Next.js environment, and deliver an image from Cloudinary using the `CldImage` component. 

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The [Cloudinary Next.js SDK](nextjs_integration) 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](node_integration) for server-side functionality.
|

### Install the Next.js SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=12 :player=cld} | To install the Cloudinary Next.js SDK, in a terminal run:
|

```
npm install next-cloudinary
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=21 :player=cld} | To configure the SDK for your product environment, you can set the `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` environment variable to your [cloud name](product_environment_settings#api_keys) in your **.env.local** file:
|

```
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="mycloud"
```

### Deliver an image from Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=34 :player=cld} | Use the [CldImage](nextjs_image_transformations) component of the Next Cloudinary SDK to display an image from your Cloudinary product environment. The component takes a [public ID](cloudinary_glossary#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](image_optimization), and enables you to use transformations, such as [background removal](background_removal).
|

```react
import { CldImage } from 'next-cloudinary';

<CldImage
  width={800}
  height={450}
  src={product.publicId}
  alt={product.name}
  removeBackground
/>
```

## Keep learning

> **READING**:
>
> * Find out more about [image](image_transformations) and [video](video_manipulation_and_delivery) transformations.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### 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 
  

&nbsp;

&nbsp;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.
&nbsp;