🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥
Tags: react, nextjs, webdev, javascript
Published: 2023-10-14 06:36:36

In today's digital world, where images and videos are pivotal in web applications, optimizing the media delivery process is essential for a seamless user experience. One powerful solution for managing and serving media assets is [Cloudinary](https://cloudinary.com/). 

In this blog post, we'll explore how to integrate Cloudinary into your Next.js application using the `next-cloudinary` package. 

## What is Cloudinary?

[Cloudinary](https://cloudinary.com/) is a cloud-based media management platform that provides an end-to-end solution for storing, managing, optimizing, and delivering media assets such as images, videos, and documents. It offers a robust set of features for transforming and serving media efficiently. Cloudinary also helps developers handle tasks like resizing, cropping, and format conversion without the need for complex server-side code.

## Why Use Cloudinary with Next.js?

Integrating Cloudinary with your Next.js application brings several benefits:

1. **Optimized Image and Video Delivery:** Cloudinary optimizes media assets for faster loading, improving your website's performance and user experience.

2. **Media Transformation:** Cloudinary allows you to dynamically transform images and videos to suit various device screen sizes and resolutions, reducing the need for manual asset preparation.

3. **CDN and Caching:** Cloudinary leverages a Content Delivery Network (CDN) to deliver assets quickly and efficiently. It also provides caching options for faster load times.

4. **Secure Storage:** Cloudinary provides secure and scalable cloud-based storage, reducing the complexity of managing media files on your servers.

5. **Seamless Integration:** With the `next-cloudinary` package, you can easily integrate Cloudinary into your Next.js project.

## Setting Up a Next.js Project

Before we integrate Cloudinary, ensure you have a Next.js project up and running. If not, you can create one using the following steps:

- Install Node.js if you haven't already. You can download it 
from the [official website](https://nodejs.org/).

- Create a new Next.js project using the following commands:
   ```bash
   npx create-next-app my-next-cloudinary-app
   cd my-next-cloudinary-app
   ```

- Run the development server with `npm run dev`. Your Next.js app should now be running at `http://localhost:3000`.

## Integrating Cloudinary with Next.js using `next-cloudinary`

To integrate Cloudinary with your Next.js application, we'll use the `next-cloudinary` package, which streamlines the process. Follow these steps:

### 1. Install the `next-cloudinary` Package

In your Next.js project directory, install the `next-cloudinary` package using npm or yarn:

```bash
Copy code
npm install next-cloudinary
# or
yarn add next-cloudinary
```

### 2. Set Up a Cloudinary Account

If you haven't already, create a [Cloudinary account](https://cloudinary.com/signup) and obtain your API credentials, including your cloud name and image preset.

![Cloudianry Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ozaxtr3rhr20e3wf16v.png)

### 3. Get the Cloud name

After logging in to your Cloudinary account, you will see the dashboard.


![Cloudinary Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njwvzjyiek57y6icpzr5.png)

Grab your cloud name and copy it in the environment variables of `next.config.js` file in your nextjs app. 

```javascript
const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "*******",
  },
};

module.exports = nextConfig;
```

Make sure that you name the variable as `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` as the next-cloudinary package automatically reads this environment variable.


### 4. Get an Unsigned Upload Preset

Now, we will need an Upload Preset to upload images.

Click on the settings icon in the left sidebar in your Cloudinary Account.

![Cloudianry Settings Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45vtxb4jhqhjqxbbd9ds.png)

Now, you will see the Accounts Page. Click on the Upload Tab from the left sidebar to head over to upload settings.

![Cloudianry Settings Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ox4le9s8zrmj9eto2os.png)


Now, you will see the upload page. On this page, you will see the Upload Presets section. Click `Enable unsigned uploading` from there to get an unsigned upload preset.


![Cloudianry Uplaod Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0wh9wmqj8mxuogn6ugj.png)


As soon as you click it, you will see an upload preset. Copy that upload preset.


![Upload Preset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sxxjyzwyktne4ldc6w5.png)

Paste this upload preset as an environment variable in the `next.config.js` file in your next.js app.

```javascript
const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "********",
    NEXT_PUBLIC_CLOUDINARY_PRESET_NAME:"********"
  },
};
module.exports = nextConfig;
```

We are going to name the environment variable as `NEXT_PUBLIC_CLOUDINARY_PRESET_NAME`.

That's it. We have all the things that are required for the setup.

### 5. Add Cloudinary in the allowed domains

In Next.js applications, when you serve images from a domain that differs from the current domain of your application, you need to specify the external domain in the `next.config.js` file.

```javascript
const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "********",
    NEXT_PUBLIC_CLOUDINARY_PRESET_NAME:"********"
  },
  images: {
    domains: ["res.cloudinary.com"],
  },
};
module.exports = nextConfig;
```

Add the `res.cloudinary.com` in the images section.

### 6. Use `next-cloudinary` in Your Components

Now, we can use Cloudinary in our components to upload the images.

The `next-cloudinary` package exposes a component named as `CldUploadButton`. We are going to use that component for image upload. Here's the code.

```javascript
"use client";
import { CldUploadButton } from "next-cloudinary";
export default function Photos() {
  return (
    <div>    
      <CldUploadButton
        options={{ multiple: true }}
        uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_PRESET_NAME}
      >
        <span>
          Upload
        </span>
      </CldUploadButton>
    </div>
  );
}

```

Make sure that you have the environment variable in place for uploadPreset.

And that's it. With this, we have completed the setup for Cloudianry to upload the images.

Here's a demo


![Cloudianry Image Upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehb3d2ikywn6nplpsviw.png)


![Cloudianry Image Upload Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9a73f3ljklnff0vmnkz.png)


## Conclusion

In this comprehensive guide, we've covered the benefits of integrating [Cloudinary](https://cloudinary.com/) with Next.js and provided a step-by-step tutorial on using the `next-cloudinary` package to easily manage and serve media assets. Following these steps can enhance your web application's performance, optimize media delivery, and provide a superior user experience. Cloudinary is a powerful tool for managing media, and when combined with Next.js, it becomes a dynamic duo for building efficient and visually stunning web applications. Start harnessing the power of Cloudinary in your Next.js project today!