> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Adaptive bitrate streaming in Next.js (video tutorial)


## Overview

Learn how to improve video streaming in your Next.js application by adding [adaptive bitrate streaming](adaptive_bitrate_streaming) (ABR) using the [CldVideoPlayer](nextjs_video_transformations) component from the [Next.js SDK](nextjs_integration). ABR automatically adjusts video quality based on the viewer's network speed and CPU capacity, preventing buffering and keeping playback smooth.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Introduction to Adaptive Streaming
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | [Adaptive bitrate streaming](adaptive_bitrate_streaming) (ABR) automatically adjusts video quality based on the viewer's network speed and CPU capacity. This prevents buffering and pausing, keeping playback smooth even on slower connections. |

### How ABR Works
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=36 :player=cld} | ABR works by switching between different renditions based on real-time network and device conditions. Instead of buffering at one fixed quality, playback adapts to maintain a smoother viewer experience. |

### Setting Up in Next.js
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=08 :player=cld} | Starting with a basic Next.js application using the [Next.js SDK](nextjs_integration) and the [CldVideoPlayer](nextjs_video_transformations) component, you can add ABR support with just a few props. |

### Implementing HLS and DASH
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=50 :player=cld} | Add the `sourceTypes` property to the `CldVideoPlayer` component with an array containing `hls` (HTTP Live Streaming) and optionally `dash` (MPEG-DASH), then apply a [streaming profile](adaptive_bitrate_streaming#predefined_streaming_profiles) such as `hd` using the `transformation` prop. |

### Testing the Setup
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=27 :player=cld} | To verify ABR is working, use Chrome DevTools to throttle the network speed (e.g., Slow 3G). The video will load briefly then play at a lower quality instead of buffering. You may need to do an empty cache and hard reload when testing locally. |

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [adaptive bitrate streaming](adaptive_bitrate_streaming) including HLS, MPEG-DASH, and predefined streaming profiles.

> * Explore the [CldVideoPlayer component](nextjs_video_transformations) in the Next.js SDK docs.

> * See how to [embed videos](nextjs_embedding_videos_tutorial) in Next.js with the Cloudinary Video Player.

> * Discover how to [optimize video delivery](video_optimization) for better performance.

#### If you like this, you might also like...

  
    Embedding Videos in Next.js
    Use the Cloudinary Video Player to embed videos using Next.js 
  

    Optimize Videos in Next.js
    Optimize delivery of videos in a Next.js app 
  

    Configure the Next.js SDK
    Install and configure the Cloudinary Next.js SDK 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;