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 package. next-cloudinary 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: Cloudinary optimizes media assets for faster loading, improving your website's performance and user experience. Optimized Image and Video Delivery: Cloudinary allows you to dynamically transform images and videos to suit various device screen sizes and resolutions, reducing the need for manual asset preparation. Media Transformation: Cloudinary leverages a Content Delivery Network (CDN) to deliver assets quickly and efficiently. It also provides caching options for faster load times. CDN and Caching: Cloudinary provides secure and scalable cloud-based storage, reducing the complexity of managing media files on your servers. Secure Storage: With the package, you can easily integrate Cloudinary into your Next.js project. Seamless Integration: next-cloudinary 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 . Your Next.js app should now be running at . npm run dev http://localhost:3000 Integrating Cloudinary with Next.js using next-cloudinary To integrate Cloudinary with your Next.js application, we'll use the package, which streamlines the process. Follow these steps: next-cloudinary 1. Install the Package next-cloudinary In your Next.js project directory, install the package using npm or yarn: next-cloudinary Copy code
npm install next-cloudinary
# or
yarn add next-cloudinary 2. Set Up a Cloudinary Account If you haven't already, create a and obtain your API credentials, including your cloud name and image preset. Cloudinary account 3. Get the Cloud name After logging in to your Cloudinary account, you will see the dashboard. Grab your cloud name and copy it into the environment variables of file in your nextjs app. next.config.js const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "*******",
  },
};

module.exports = nextConfig; Make sure that you name the variable as as the next-cloudinary package automatically reads this environment variable. NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME 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 of your Cloudinary Account. Now, you will see the Accounts Page. Click on the Upload Tab from the left sidebar to head to upload settings. Now, you will see the upload page. On this page, you will see the Upload Presets section. Click from there to get an unsigned upload preset. Enable unsigned uploading 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 file in your next.js app. next.config.js 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 file. next.config.js 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 in the images section. res.cloudinary.com 6. Use in Your Components next-cloudinary Now, we can use Cloudinary in our components to upload the images. The the package exposes a component named as . We are going to use that component for image upload. Here's the code. next-cloudinary CldUploadButton "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 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! next-cloudinary

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The Ultimate Guide to Integrating Cloudinary With Next.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

🔥here's How I Built a Stunning Chat App With React 🚀

7 Best JavaScript File Uploads APIs in 2023

A Beginner’s Guide To Postman File Uploads

Cloudinary Upload API Introduction: Hassle Free Alternative to AWS S3

Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

🔥here's How I Built a Stunning Chat App With React 🚀

7 Best JavaScript File Uploads APIs in 2023

A Beginner’s Guide To Postman File Uploads

Cloudinary Upload API Introduction: Hassle Free Alternative to AWS S3

Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps