Kishan Sheth

Posted on Oct 14, 2023

🚀 Supercharge Your Next.js App with Stunning Images! Learn the Ultimate Cloudinary Image Upload Hack 🔥

#react #nextjs #webdev #javascript

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.

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 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:

Optimized Image and Video Delivery: Cloudinary optimizes media assets for faster loading, improving your website's performance and user experience.
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.
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.
Secure Storage: Cloudinary provides secure and scalable cloud-based storage, reducing the complexity of managing media files on your servers.
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.
Create a new Next.js project using the following commands:

   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:

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 and obtain your API credentials, including your cloud name and image preset.

3. Get the Cloud name

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

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

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.

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

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.

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

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

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.

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.

"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

Conclusion

In this comprehensive guide, we've covered the benefits of integrating Cloudinary 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!