Next.js quick start

This quick start lets you get an end-to-end implementation up and running using the Next.js SDK in 5 minutes or less.

Prerequisites

1. Set up and configure the SDK

Install the package

Install the required package using the NPM package manager:

Configure Cloudinary

Create or update your .env.local file in your Next.js project root and add your cloud name:

2. Upload an image

The Next.js SDK provides easy-to-use upload components. For this quick start, we'll use the CldUploadButton component to upload an image.

First, you need to create an upload preset in your Cloudinary Console:

1. Log into your Cloudinary Console
2. Go to Settings > Upload
3. Scroll to Upload presets and click Add upload preset
4. Set Signing Mode to Unsigned
5. Set Folder to docs (optional, but helps organize your assets)
6. Click Save
7. Copy the Preset name - you'll need this in the next step

Now add upload functionality to your project (if you've created a new Next.js project, you can replace the contents of app/page.tsx, otherwise create a new page in your project, or modify an existing page):

Replace your_upload_preset with the preset name you copied from the Cloudinary Console.

This code creates an "Upload Image" button, which, when clicked, opens the Cloudinary Upload Widget, allowing you to upload from various sources.

3. Transform and deliver the image

Following upload, you can use the CldImage component to transform and deliver the image, using its public ID.

Update your page to include the transformation:

1. Add CldImage to the import from next-cloudinary.

2. Add the CldImage component inside the conditional block, after the Public ID paragraph and before the closing </div>:

   The CldImage component uses the uploaded image's public ID to apply transformations:

   • width: 250 pixels
   • height: 250 pixels
     
   • crop: fill (ensures the image fills the entire space)

The full code should look like this (with your_upload_preset replaced with your own upload preset name):

4. Run your code

Start your Next.js development server:

Navigate to http://localhost:3000 (or your configured port) and:

1. Click the "Upload Image" button
2. Upload an image using the Cloudinary Upload Widget
3. After upload completes, you'll see:
   • The public ID
   • The transformed image (250x250, cropped to fill)

View the completed code

You can find the full code example for this quick start on GitHub.