{"id":28068,"date":"2023-08-04T07:00:00","date_gmt":"2023-08-04T14:00:00","guid":{"rendered":"http:\/\/Lazy-load-Videos-in-Next.js-Pages"},"modified":"2025-02-15T14:17:14","modified_gmt":"2025-02-15T22:17:14","slug":"lazy-load-videos-in-next-js-pages","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lazy-load-videos-in-next-js-pages","title":{"rendered":"Lazy-Load Videos in Next.js Pages"},"content":{"rendered":"

Over time, engineering efforts have been put into developing more performant web applications. Jamstack<\/a> technologies like Next.js<\/a> came from this need.<\/p>\n

JAMstack<\/a> technologies like Next.js<\/a> emerged from an interest in improving the performance of modern web applications.<\/p>\n

This article will show you one way to improve your application performance by lazy-loading video assets on a Next.js page.<\/p>\n

Before You Start<\/h2>\n

Next.js is a modern React.js framework for building fast web pages and web applications. Next.js touts numerous features to improve both developer experience, and web application performance.<\/p>\n

Lazy-loading is a technique in software engineering that requires delaying fetching\/loading resources until you need them. The loading activity can be triggered by different user actions, including scrolling, hovering, or highlighting.<\/p>\n

Lazy-loading shaves off any kilobytes contributing to page load times or network resources. It\u2019s currently used to defer images and JavaScript modules during runtime.<\/p>\n

Now, as a page loads, videos load a placeholder image along with a portion of the video. Once the video is played, the remaining part of the video is buffered.<\/p>\n

We\u2019ll shave off the page kilobytes loaded by the video, and defer loading until the video is scrolled into view, using the web intersection observer API. React-intersection-observer<\/a> is a React.js implementation for an intersection observer, which informs us when a DOM element is in view.<\/p>\n

Sandbox<\/h2>\n

We completed this project in CodeSandbox<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Prerequisites and Installation<\/h2>\n

Having some knowledge of, and experience with, JavaScript and React.js is required for this project. You don\u2019t need to know Next.js in-depth, either.<\/p>\n

We\u2019ll install Next.js globally on our computer using yarn with the CLI command.<\/p>\n

    yarn create next-app\n<\/code><\/span><\/pre>\n
This command opens a prompt to enter the project title. We\u2019ll use a project name of our choice, and yarn will install all dependencies required to bootstrap a Next.js project with the default starter.<\/p>\n
Find more methods to install Next.js here<\/a>.<\/p>\n
With the new project created, we\u2019ll install two dependencies. We\u2019ll need the Cloudinary-React<\/a> library to use Cloudinary\u2019s robust video player, and react-intersection-observer<\/code>.<\/p>\n
In the project directory, we\u2019ll install these packages using yarn in the CLI with:<\/p>\n
    yarn add cloudinary-react react-intersection-observer\n<\/code><\/span><\/pre>\n
With these installed, we\u2019ll start a development server for the project using the CLI command, yarn dev<\/code>.<\/p>\n
Page Creation<\/h2>\n
Like most modern frontend development frameworks, pages are created automatically using files in a designated folder. This is true for Next.js, too. The project\u2019s home page is located in pages\/index.js<\/em> in the project\u2019s root directory.<\/p>\n
We\u2019ll need to create long-form content on the homepage so that we can sufficiently handle the scrolling activity. To do this, we\u2019ll make a content block component file titled ContentBlock.jsx<\/em> with dummy text in src\/components<\/code>. In this file, we\u2019ll create a function component with the following:<\/p>\n
    export<\/span> const<\/span> ContentBlock = ({ title = \"Part\"<\/span> }<\/span>) =><\/span> {\n      return<\/span> (\n        <div<\/span>><\/span>\n          <h2<\/span>><\/span>{title}<\/h2<\/span>><\/span>\n          <p<\/span>><\/span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl\n            nunc, commodo quis faucibus non, venenatis nec mi. Praesent velit neque,\n            gravida at felis a, pulvinar sollicitudin metus. Vestibulum quis\n            vehicula metus. Maecenas tincidunt est ex, nec volutpat enim gravida\n            vitae. Donec dui orci, lacinia nec suscipit vitae, suscipit eget nulla.\n            Pellentesque ipsum velit, accumsan vel vehicula et, convallis at eros.\n            Fusce ac elit id ante varius posuere vitae eget enim. Nunc enim ex,\n            sodales vitae suscipit eget, dictum ac ante. Pellentesque tincidunt\n            vehicula pellentesque. Aliquam posuere et turpis non tincidunt.\n            Curabitur rhoncus euismod ante euismod cursus. Donec quis arcu eu sem\n            mattis fringilla non et augue. Integer lorem purus, sollicitudin vel\n            egestas et, mattis efficitur metus. Nam consectetur faucibus sem varius\n            lacinia.\n          <\/p<\/span>><\/span>\n          <p<\/span>><\/span>\n            Duis vitae ultricies tortor. In hac habitasse platea dictumst. Praesent\n            a ante sit amet ante mollis mattis ac nec nibh. Ut id tristique leo.\n            Etiam lobortis lacinia purus at semper. In mattis tincidunt leo, non\n            laoreet neque elementum vel. Nam ullamcorper lacus massa, a finibus\n            neque auctor eget. Sed sapien felis, tempus quis tempor vel, ultrices eu\n            lorem. Aenean in egestas tellus. Proin velit ante, suscipit in dui sit\n            amet, maximus faucibus massa. Donec porttitor ante dolor, a convallis\n            ligula mollis id. Curabitur suscipit nisi nec velit ornare porta. In\n            erat odio, blandit et iaculis at, ultrices a sapien. Suspendisse\n            potenti.\n          <\/p<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component will receive a prop of title<\/code> with which we\u2019ll set the content title, and it\u2019ll render the set title and dummy text. We\u2019ll also add a default title of Part<\/code> through the prop.<\/p>\n
This content block component will be used multiple times on the home page to create a scrollable page.<\/p>\n
In the home page component located in pages\/index.js<\/code>, we\u2019ll use the ContentBlock<\/code> component to render multiple contents.<\/p>\n
    import<\/span> { ContentBlock } from<\/span> \"..\/src\/components\/ContentBlock\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span>><\/span>\n          <h1<\/span>><\/span>Lazyloading videos in Next.js apps<\/h1<\/span>><\/span>\n          <div<\/span>><\/span>\n            <h2<\/span>><\/span>We'll make a long page with text content<\/h2<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <ContentBlock<\/span> title<\/span>=\"Part 1\"<\/span> \/><\/span>\n          <ContentBlock<\/span> title<\/span>=\"Part 2 - After the video player\"<\/span> \/><\/span>\n          <ContentBlock<\/span> title<\/span>=\"Part 3\"<\/span> \/><\/span>\n          <ContentBlock<\/span> title<\/span>=\"Part 4 - After the video player\"<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Creating the Video Player Component<\/h2>\n
We\u2019ll need to create a video player component, which we\u2019ll use on the home page or any other page where it\u2019s required. In src\/components<\/code> we\u2019ll create a new component file named VideoPlayer.jsx<\/code>. In the video player file, we\u2019ll first import the required dependencies and create a memoized<\/a> video player component.<\/p>\n
    import<\/span> { Video, CloudinaryContext } from<\/span> \"cloudinary-react\"<\/span>;\n    import<\/span> { useState, useEffect, memo } from<\/span> \"react\"<\/span>;\n    import<\/span> { useInView } from<\/span> \"react-intersection-observer\"<\/span>;\n    \n    const<\/span> MemoVidPlayer = memo(({ publicId }<\/span>) =><\/span> {\n      return<\/span> (\n        <CloudinaryContext<\/span> cloudName<\/span>=\"chuloo\"<\/span>><\/span>\n          <Video<\/span> publicId<\/span>={publicId}<\/span> width<\/span>=\"600px\"<\/span> controls<\/span> \/><\/span>\n        <\/CloudinaryContext<\/span>><\/span><\/span>\n      );\n    });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the snippet above, we created a video player using the Video<\/code> component in the Cloudinary-React package. This Video<\/code> component accepts a prop of publicId<\/code>, a unique identifier for the video on Cloudinary. This way, we can serve remote optimized images hosted on Cloudinary.<\/p>\n
CloudinaryContext<\/code> is a wrapper component that provides data passed as props to all of its child Cloudinary components. In this wrapper, we\u2019ll pass the cloud name of our Cloudinary account. You can obtain this from your Cloudinary dashboard after creating an account.<\/p>\n
The video player is returned in a memo function to ensure that the component doesn\u2019t render again, so long as its content and data don\u2019t change.<\/p>\n
In VideoPlayer.jsx<\/code>, we\u2019ll create an exported function that we\u2019ll use on the home page. This function will handle the lazy loading of the previously created MemoVidPlayer<\/code> component.<\/p>\n
    export<\/span> const<\/span> VideoPlayer = ({ vidPublicId = \"video-blog\/cat\"<\/span> }<\/span>) =><\/span> {\n      const<\/span> [publicId, setPublicId] = useState(\"\"<\/span>);\n      const<\/span> { ref, inView } = useInView({ threshold<\/span>: 1<\/span> });\n      useEffect(()<\/span> =><\/span> {\n        if<\/span> (inView === true<\/span>) {\n          setPublicId(vidPublicId);\n        }\n      }, [inView, vidPublicId]);\n      return<\/span> (\n        <div<\/span> ref<\/span>={ref}<\/span>><\/span>\n          <MemoVidPlayer<\/span> publicId<\/span>={publicId}<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the VideoPlayer<\/code> component, we\u2019ll create a state variable to store the video\u2019s publicId<\/code>. The video player will not load if the public ID is wrong or a source is not provided. This is a similar pattern used in lazy-loading images. We\u2019ll update the source of the video once it scrolls in view.<\/p>\n
Next, we\u2019ll destructure the ref<\/code> and inView<\/code> values from the useInView<\/code> hook imported from react-intersection-observer<\/code>. The ref<\/code> value is assigned to the DOM element to be tracked, and inView<\/code> returns a boolean value to show when the tracked element is in view. The threshold<\/code> option ranges from 0 to 1, showing how much of the tracked element needs to be in view to trigger a change in the inView<\/code> value.<\/p>\n
In a useEffect<\/code> hook, we\u2019ll check if inView<\/code> is true before updating the state value from an empty public ID to the video\u2019s specified public ID. The useEffect<\/code> hook takes a dependency array of values that would trigger the component\u2019s rerender if it changes.<\/p>\n
For our VideoPlayer<\/code> component, we\u2019ll set a default public ID of video-blog\/cat<\/code>.<\/p>\n
Lastly, we\u2019ll update the home page component to show the video player, with each video having a different public ID from the other.<\/p>\n
    import<\/span> { VideoPlayer } from<\/span> \"..\/src\/components\/VideoPlayer\"<\/span>;\n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span>><\/span>\n          <h1<\/span>><\/span>Lazyloading videos in Next.js apps<\/h1<\/span>><\/span>\n          <div<\/span>><\/span>\n            <h2<\/span>><\/span>We'll make a long page with text content<\/h2<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <ContentBlock<\/span> title<\/span>=\"Part 1\"<\/span> \/><\/span>\n           <VideoPlayer<\/span> \/><\/span>\n           <ContentBlock<\/span> title<\/span>=\"Part 2 - After the video player\"<\/span> \/><\/span>\n           <VideoPlayer<\/span> vidPublicId<\/span>=\"video-blog\/kitten\"<\/span> \/><\/span>\n           <ContentBlock<\/span> title<\/span>=\"Part 3\"<\/span> \/><\/span>\n           <VideoPlayer<\/span> vidPublicId<\/span>=\"video-blog\/doggo\"<\/span> \/><\/span>\n           <ContentBlock<\/span> title<\/span>=\"Part 4 - After the video player\"<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here\u2019s how the final page looks.<\/p>\n
\"\"<\/p>\n
We\u2019ll also check the browser console to see the loaded media assets in the network tab. The network tab shows the deferred loading of the video thumbnail and the preloaded video.<\/p>\n
\"\"<\/p>\n
Summary<\/h2>\n
This article discussed the importance of lazy-loading media assets for performance improvements on modern web pages. We also walked through how to lazy-load a video component on a page using the react-intersection-observer package. Experiment with lazy-loading multiple videos on your pages for improved performance benefits.<\/p>\n
Want to discuss the topic of this blog or have a question? Head over to the Cloudinary Community forums<\/a> or Discord<\/a> and join the conversation!<\/p>\n
##Resources<\/p>\n
You can create a Cloudinary account<\/a> to store, retrieve, and perform transformations on media assets, including videos. For this project, it\u2019s essential to note that we can replace the Video<\/code> component used here with any other video element, including the HTML video<\/code> element.<\/p>\n