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

# Upload assets in a Next.js app (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main?tab=readme-ov-file#nextjs

## Overview

Add asset upload capabilities to your Next.js application using the Cloudinary [Upload widget](upload_widget). Learn how to install and configure the Upload widget, for both [unsigned](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-clduploadwidget) and [signed](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-clduploadwidget-signed) uploads.

## 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/next_upload_assets}

> **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 to the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Cloudinary has many ways to upload files to your product environment, enabling you to take advantage of Cloudinary's extensive features and capabilities. In a Next.js app you can use the [CldUploadWidget](nextjs_image_and_video_upload#using_clduploadwidget) component of the [Next.js SDK](nextjs_integration) as a quick and easy way to provide a full upload experience.
|

### Add an unsigned Upload widget to your Next.js app
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Start with a Next.js app with the Cloudinary Next.js SDK already [installed and configured](nextjs_integration#install). Import `CldUploadWidget` from `next-cloudinary`, then copy and paste the [code for the unsigned Upload widget](nextjs_image_and_video_upload#using_clduploadwidget).  Make sure you have the `'use client';` directive at the top of your code.
|

### Create an upload preset
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | In your Cloudinary Console, navigate to **Settings > Upload > Upload presets** to create a new unsigned [upload preset](upload_presets). Give the preset a name and make sure to change the **Signing mode** to  **unsigned**, then save the upload preset. Add the name of the upload preset to your code.
|

### Customize the Upload widget button
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | You can customize the Upload widget button by adding some CSS classes to the `button` component. 
|

### Add a signed Upload widget to your Next.js app
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | For a more secure upload, use a signed Upload widget. Use the [Node.js SDK](node_integration) to generate a signature for upload. Create a route handler in your Next.js app to call the [api_sign_request](node_image_and_video_upload#direct_uploading_from_the_browser) method of the Node.js SDK. Replace the `uploadPreset` prop with the `signatureEndpoint` prop, set to the endpoint (in this case `"/api/sign-image"`).
|

### Customize the Upload widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | There are many ways to customize the Upload widget, for example by limiting the sources of the files to upload. Check out all the options in the [docs](upload_widget_reference#parameters). 
|

## Keep learning

> **READING**:
>
> * Read our Upload widget [guide](upload_widget) and [reference](upload_widget_reference), covering every available parameter option.

> * Learn about other components in the [Next.js SDK](nextjs_integration).

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

[Generate Upload Signature](generate_upload_signature_tutorial)

Generate a timestamp and signature for a signed upload

[Optimize Videos in Next.js](optimize_videos_nextjs_tutorial)

Optimize delivery of videos in a Next.js app

[AI Generative Fill using Next.js](gen_fill_next_tutorial)

Extend images using generative AI in a Next.js app

 

 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.