Cloudinary API with Next JS

Today we are going to learn how to implement Cloudinary api in your nextjs website.

first let's understand what is cloudinary & what are the benefits of it ? Instead of keeping media files in your static folder of source code, you can upload them on cloudinary & access them with an API URL. this gives you tremendous flexibility to work with media file, for example: if you want to crop an image, you can easily do it by just adding transformation parameters in Cloudinary Image URL & you can create responsive image which fits all devices screen sizes. cloudinary handles every thing related to image editing for you, this make your job as web developer more easy & fun.

now let's look at coding side of how to use Cloudinary api in nextjs, i will explain you in very simple way so you will understand concepts & later you can use it the way you want. first create a next js project and open it in VS Code, now install cloudinary api for react using npm install inside terminal windows.

npm i @cloudinary/url-gen @cloudinary/react

cloudinary has 2 types of apis, serverside & client side api, here we are installing client side api only.

now open the page.js file which is home page, we have to initiate Cloudinary with your own unique Cloud name id. you can get cloud name from Cloudinary dashboard after log-in into cloudinary account. we will initiate cloudinary with constructor name 'cld'

const cld = new Cloudinary({ cloud: { cloudName: 'CLOUDINARY_CLOUDNAME' } });

inside your default page function, we will use constructor 'cld' to get the image url from cloudinary server & save it in variable name "myImageURL".

var myImageURL = cld.image("samples/cat").toURL(); 

once you get the Image URL in variable "myImageURL", you can pass this url to NextJS-Image component to display image on webpage.

  <Image
        className="mx-auto"
        src={myImageURL}
        width={600}
        height={600}
        alt=""
      />

since we are using nextjs, make sure you update config file to allow cloudinary url to be displayed in image component

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
      },
    ],
  },
};

export default nextConfig; 

now we are ready, let's run localhost server by npm run command & open the web browser. you can see our cat image from cloudinary is displayed on web page. this is the most oversimplified way of using cloudinary api in nextjs. if you want you can do more modification to images like to decrease image size with lossless quality, cloudinary can convert image into webp format just by adding ''.format()" parameter. we can also add additional parameters to change it's pixel width by using "resize()" parameter and make rounded corners by adding "roundedCorners()" parameters.

var myImageURL = cld.image("samples/cat")
                      .resize(scale().width(600))
                      .roundCorners(byRadius(50))
                      .format('webp')
                      .toURL();

and finally make sure that you import all necessary function at top of javascript file.

import { scale } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";

now open it in web browser to see final output. as you can see how effortless it is to modify, edit & optimise images with the help of cloudinary.

our original image was in jpeg format with size 596 kb & 3000 pixel width , rendering such hugh image in web browser will be crazy & obliviously page loading time will increase. but here we have converted that same image using cloudinary api to webp format & 600 pixel width with image file size of just 16kb. that's how cloudinary can improve performance of website & gives you flexibility to edit, modify images on cloud.

if you want the complete source code of this then git repo is mention in this video description, feel free to check it out