Integrating Cloudinary for File Uploads in Next App Router

Cloudinary is one of the cloud services that you can use to upload image or file. and this story we will integrate cloudinary on next app router through server-side to show image and upload image through client-side.

Prerequisite:

Before using cloudinary, make sure you sign up to cloudinary and create new app to get API Key, Cloud name and API Secret. You can find the key inside menu Setting.

After sign up create new preset that you can use when upload file. Go to Setting and Upload Preset menu then create like this:

Then, you have to install Cloudinary SDK inside your app. Run this command to install the SDK:

npm install cloudinary

1. UI Upload Form

Create new page for upload form and follow code below:

import UploadImage from "@/components/upload";

export default async function Page() {
  return (
    <main…