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

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

> **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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=02 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=37 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=29 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=40 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=52 :player=cld} | 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 a timestamp and signature for a signed upload 
  

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

  
  
  
    AI Generative Fill using Next.js
    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.