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

# AI generative fill in Next.js (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-cldimage/pages/index.jsx#L39 

## Overview

This video tutorial shows you how to extend your images to different aspect ratios, automatically filling in the extra space using generative AI.

## 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} | See how easy it is to extend images with [generative fill](generative_ai_transformations#generative_fill) using the Cloudinary [Next.js](nextjs_integration) SDK.
|

### Display an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=47 :player=cld} | Start off in the **pages** folder of your Next.js app, importing `CldImage` from `next-cloudinary`, and displaying an image from Cloudinary:
|
```react
import { CldImage } from 'next-cloudinary';

<CldImage
  width="6000"
  hight="4000"
  src="examples/tech-desk_yfklpt"
  alt="Phone,sunglasses, and watch on desk"
  sizes="100vw"
/>
```

### Use generative fill on the image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=01 :player=cld} | To use generative fill on the image, add the `fillBackground` prop to the `CldImage` component and change the aspect ratio of the image, for example by swapping the width and height. 
|
```react
<CldImage
  width="4000"
  hight="6000"
  src="examples/tech-desk_yfklpt"
  alt="Phone,sunglasses, and watch on desk"
  sizes="100vw"
  fillBackground
/>
```

### Create a banner with a text overlay
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=05 :player=cld} |  To create a banner, leaving room for a [text overlay](layers#text_overlays) on the right, you can extend an image to the right, keeping the original focal point on the left.  To do this, add a custom object to the `fillBackground` property, setting `gravity` to `west`:
|
```react
<CldImage
  width="3008"
  hight="1000"
  src="examples/cosmetics_da50sm"
  alt="Cosmetics on a table"
  sizes="100vw"
  fillBackground{{
    gravity: 'west'
  }}
/>
```

### Reuse the template for any image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=10 :player=cld} | You can use the same template on any image, giving you the ability to extend images automatically, and at scale.
|

## Keep learning

> **READING**:
>
> * See more of [Cloudinary's AI capabilities](ai_in_action) in action.

> * Learn more about [image](image_transformations) and [video](video_manipulation_and_delivery) transformations.

> * Check out the [Transformation reference](transformation_reference) for a listing of all Cloudinary transformations, including syntax details and examples.

> * 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...

  
  
  
    Using the Next.js Image Component
    Deliver images using the Next.js Image component 
  

  
  
  
    Optimize Videos in Next.js
    Optimize delivery of videos in a Next.js app 
  

  
  
  
    Create Social Media Cards in Next.js
    Dynamically create social media image cards using Next.js 
  

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