本文学习如何在Next.js应用中上传文件。
选择云平台
需要选择某个云平台存储用户上传的文件。有很多云平台可以选择，比如Amazon S3、Google Cloud、Microsoft Azure等，本节我们选择的是Cloudinary，因为它与Next.js集成度最好，而且还它提供一些React组件供我们的项目使用。
使用Cloudinary的代码较少，只需一些配置。与之对比，如果使用Amazon S3，就有不少步骤和代码需要实现。
设置 Cloudinary
如果没有云账户，就去注册一下。
登录后能看到环境名称，复制下来，程序会用到。
安装cloudinary。
npm i next-cloudinary安装会带来一些实用组件。我们查看一下文件，搜索“next cloudinary”会找到https://next.cloudinary.dev/ ，根据说明在.env文件中添加一行，并以实际的cloudinary环境名称代替：
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
上传文件
查看next.cloudinary.dev网站，了解相关组件的使用方法。
新建upload文件夹并在其下新建page.tsx声明upload是路径，在page.tsx下，使用CldUploadWidget组件，uploadPreset需要在Cloudinary上生成。CldUploadWidget本身不展示UI，我们用它将要展示的UI包起来，这里用了一个button。
button的onClick事件，直接调用CldUploadWidget解构出来的open函数，由于有客户端事件，所以在开头声明 “use client”;
uploadPreset的官网截图。
示例页面效果。这个组件可以从多个地方选择文件，这是可以自定义的，比如程序只希望从本地选择图片。
上传完成后，可以在Cloudinary里查看管理。
显示上传的图像
添加一个State用于保存上传图像的信息(publicID)，CldUploadWidget添加onUpload事件设置publicID，再添加CldImage组件显示图片。
自定义上传小部件
查看官网示例。
https://demo.cloudinary.com/uw/
我们调整布局及设置，比如只允许本地电脑选择。调整后可以查看代码，进行复制。
调整布局代码如下：
小结
本文介绍了利用Cloudinary上传文件。
下一篇介绍使用 Next Auth 进行身份验证。