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 or .env file in your Next.js project root and add your cloud name (replace your_cloud_name with your own cloud name):

For a complete list of the environment variables you can set and what they're for, see Configure in the Next.js SDK guide.

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 and go to the Upload Presets page (Settings > Upload > Upload Presets tab).
2. Click Add Upload Preset.
3. Enter a name for the preset in the Upload preset name field, for example docs_quickstart. You'll need this name in the next step.
4. Set Signing mode to Unsigned.
5. Set Asset folder to docs (optional, but helps organize your assets). If your product environment uses fixed folder mode, this field is called Folder.
6. Click Save.

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 name you entered when you created the upload preset.

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

Fork the repo and try it yourself

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

• Enjoy interactive learning? Check out more sample apps!