Posted on Oct 14 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. 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.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.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:To integrate Cloudinary with your Next.js application, we'll use the next-cloudinary package, which streamlines the process. Follow these steps:In your Next.js project directory, install the next-cloudinary package using npm or yarn:If you haven't already, create a Cloudinary account and obtain your API credentials, including your cloud name and image preset.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.Make sure that you name the variable as NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME as the next-cloudinary package automatically reads this environment variable.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.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.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.Add the res.cloudinary.com in the images section.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.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 demoIn 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!Templates let you quickly answer FAQs or store snippets for re-use.That's an awesome article Kishan. Just what I was looking for. Thankyou. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Andrew Jones - Oct 11 Antonio Moruno Gracia - Oct 10 Andrew Ezeani - Sep 24 Michael Bogan - Sep 27 Once suspended, kishansheth will not be able to comment or publish posts until their suspension is removed. Once unsuspended, kishansheth will be able to comment and publish posts again. Once unpublished, all posts by kishansheth will become hidden and only accessible to themselves. If kishansheth is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kishan Sheth. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag kishansheth: kishansheth consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging kishansheth will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.