Next.js SDK

The Cloudinary Next.js SDK provides simple, yet comprehensive image and video rendering, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Next.js application.

How would you like to learn?

Install

Install the next-cloudinary package using the NPM package manager:

Configure

Set required configuration parameters

Add your Cloudinary cloud name to your environment variables:

Set additional configuration parameters

In addition to the required configuration parameters, you can define a number of optional environment variables if relevant:

Configuration video tutorials

The following tutorials can help you install and set up your SDK:

See more Next.js video tutorials.

Use

Once you've installed and configured the Next.js SDK, you can use it for:

• Rendering and transforming images - Render your images with transformations applied, using the CldImage component. See examples
• Rendering and transforming videos - Render your videos with transformations applied, using the CldVideoPlayer component. See example
• Uploading assets - Use the upload components to easily add upload functionality to your application. See example
• Generating social media cards - Create Open Graph images and social media cards with the CldOgImage component. See example

Quick examples: Image transformations

Here are two quick examples to get you started with image transformations:

• Image transformation example 1 - Apply a sepia effect to an image
• Image transformation example 2 - Apply multiple transformations

Image transformation example 1

The following Next.js code renders the front_face.jpg image with a sepia effect applied:

This code creates the HTML required to render the following transformation URL:

Image transformation example 2

You can apply more than one transformation at a time to give more interesting results:

This code performs all of the following on the original front_face.jpg image before delivering it:

• Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
• Round the corners with a 20 pixel radius
• Apply a sepia effect
• Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). Scale the logo overlay down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%).
• Rotate the resulting image (including the overlay) by 10 degrees

And here's the URL that's automatically generated and rendered from the above code:

Quick example: Video transformations

Here's an example to get you started with video transformations using the CldVideoPlayer component.

The following Next.js code renders the ship.mp4 video with the Cloudinary Video Player and transformations applied:

This code performs the following transformations on the video:

• Crop to a 1:1 aspect ratio (square) with a width of 300 pixels, using automatic gravity to determine the focal point
• Apply a blur effect with strength 50
• Apply maximum rounding to create a circular video

Uploading assets

The Next.js SDK provides two components for uploading assets, CldUploadButton and CldUploadWidget.

CldUploadButton

A drop-in button component that opens the Cloudinary Upload Widget:

CldUploadWidget

A customizable upload widget component:

Social media cards

Generate Open Graph images and social media cards with the CldOgImage component:

Helper methods

In addition to components, the Next.js SDK provides helper methods for generating Cloudinary URLs:

getCldImageUrl

Generate a Cloudinary image URL using the same API as CldImage:

Learn more

getCldOgImageUrl

Generate a Cloudinary URL specifically for OG Images or Social Media Cards:

Learn more

getCldVideoUrl

Generate a Cloudinary video URL:

Learn more

Next.js App Router

The Next.js SDK fully supports the App Router introduced in Next.js 13. When using components in the App Router, make sure to add the 'use client' directive at the top of your file:

Sample projects

Take a look at the Next.js sample projects page to help you get started integrating Cloudinary into your Next.js application.