Add a button for uploading media and other files to Cloudinary in Next.js.

To add an upload widget instance, use the following:

import { CldUploadButton } from 'next-cloudinary';

<CldUploadButton uploadPreset="<Your Upload Preset>" />

See the component in action at pages/index.jsx.

Make sure to put "use client" directive at the top of the component when you use <CldUploadButton />

"use client"

import { CldUploadButton } from 'next-cloudinary';

<CldUploadButton uploadPreset="<Your Upload Preset>" />

See the component in action at components/Uploader.jsx.

Learn more on the docs.

• Install the project dependencies with:

yarn install
# or
npm install

• Add your cloud name as an environment variable inside .env.local:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Note: the upload preset must be updated to one available in your account

• Start the development server with:

yarn dev
# or
npm run dev

• Visit the project at http://localhost:3000!