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

# List images in Next.js (video tutorial)

## Overview

Learn how to list images using the Next.js app router and the [Cloudinary Node.js SDK](node_integration). Search for assets using queries or by tag, and display them in a Next.js application rendered using React Server Components (RSC).

## 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/List_Images_Next.js_App_Router}

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Getting images into Cloudinary is easy but what about getting them out? You can use the [Search API](search_method) and [Cloudinary Node.js SDK](node_integration) to display them in your Next.js app router application.
|

### Intro to App router in Next.js
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | The Next.js app router brings some big changes and improvements to developer experience. The introduction of server vs client components is a key part of this. Client components behave like a typical React component, whereas server components offer the ability to do data fetching from within the component.
|

### Configure Home page for data fetching
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | By default, pages and components will be server components. You can turn the `Home` page into an asynchronous component by adding the `async` tag in front of the function name, making it possible to use `await` for data fetching.
|

```js
async function Home() {
  await ...
}
```

### Add search requests using the Cloudinary Node.js SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Install and configure the [Cloudinary Node.js SDK](node_integration) to be able to use it from your server designated React component. Add your SDK code inside your asynchronous page component to perform a search. For example to find all images with "converse" in the name:
|

```js
const resources = await cloudinary.search.expression('converse').execute();
```

### Search for images by tag
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Instead of returning all images or images by name, you can also search for images by tag. For example to find images with the tag "sneakers":

```js
const resources = await cloudinary.search.expression('tags=sneakers').execute();
```

### Use returned images on your page
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Use the returned Cloudinary images on your page by looping through the returned images. First, destructure the returned `resources` to get the resources array from the JSON. Use map to iterate through the `resources` array. If using typescript, reference the `CloudinaryResource` and define this as an interface with `public_id` and `secure_url` as strings. Update your list items to reference the `public_id` as the key and `secure_url` as the image src.

```js

interface CloudinaryResource {
  public_id: string;
  secure_url: string;
}

...

const { resources } = await cloudinary.search.expression('tags=sneakers').execute();

...

{resources.map((product: CloudinaryResource) => {
  return(
    <li key={product.public_id}>
      <img 
        src={product.secure_url}
      />
    </li>
  )
}
)}

```

### Take it further
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Take it further by learning all about how to add Cloudinary optimizations and transformations using the [Next.js SDK](nextjs_integration).

## 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](optimization_tips_tutorial)

Tips for delivering optimized images

[Upload Assets with Server Actions](upload_assets_with_server_actions_nextjs_tutorial)

Upload assets to Cloudinary using Next.js Server Actions

[Optimize Videos in Next.js](optimize_videos_nextjs_tutorial)

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;