> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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.
{videoTranscript:publicId=training/Generative_Fill_in_Next}

> **View the code :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> 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}|  | 
| --- | --- |
| | See how easy it is to extend images with [generative fill](generative_fill) using the Cloudinary [Next.js](nextjs_integration) SDK.
|

### Display an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| | 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}|  | 
| --- | --- |
| |  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}|  | 
| --- | --- |
| | 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](nextjs_image_component_tutorial)

Deliver images using the Next.js Image component

[Optimize Videos in Next.js](optimize_videos_nextjs_tutorial)

Optimize delivery of videos in a Next.js app

[Create Social Media Cards in Next.js](nextjs_social_media_cards_tutorial)

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;