Create a Product Gallery with Videos in Next.js

Images are powerful, and when used properly, they increase the chances of a customer making a purchase. We can add videos to product galleries to make the galleries more robust and drive even more substantial sales.

In this article, we'll learn to build an ecommerce product gallery that contains images and videos using Next.js and Cloudinary's Product Gallery widget.

SandBox

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

Prerequisites

Knowledge of React, Next.js, and a Cloudinary account is required to get the most out of this article.

Getting started

Create a Next.js project by running the command below in your terminal.

1npx create-next-app product-video-gallery

Next, navigate into the project directory.

1cd product-video-gallery

Then, run the command below to start the application.

1npm run dev

Setting up Cloudinary

Navigate to the Media Library section of the Cloudinary dashboard and create a new folder called video gallery.

Upload some images and videos into the video-gallery folder.

Cloudinary's Product Gallery widget

With Cloudinary's Product Gallery widget, we can dynamically display images, videos, 3D models, and 360-degree animations on our websites with ease.

The following steps are required to integrate the widget into our application:

Tag the media assets we want to render in the widget.
Provide access to client-side resource lists.

To add tags to the images and videos, click on any of them, and then a sidebar will appear on the right side of the dashboard.

Next, click on the "metadata" setting in the sidebar. We'll set the tag of the images as dog-picture and that of the videos as dog-videos and then save the tags. We'll do this for all the images and videos we want the widget to track.

Cloudinary supports listing resources from the client side by their tags. However, the resource list is restricted by default, so we need to enable it on our account's security settings page.

On the security settings page, scroll down to 'Restricted media types', uncheck 'Resource List', and then save.

Initializing the Product Gallery Widget

Update the index.js file with the code below.

1import { useEffect } from "react";
2    
3 
4    export default function Home() {
5      useEffect(() => {
6
7        const productGallery = cloudinary.galleryWidget({
8          container: "#video-gallery",
9          cloudName: "OUR-ACCOUNT-CLOUD-NAME",
10          mediaAssets: [
11            { tag: "dog-picture", mediaType: "image" },
12            { tag: "dog-video", mediaType: "video" },
13          ],
14        });
15        
16        productGallery.render();
17      }, []);
18      
19      return (
20        <div className="container">
21          <h1>Ecommerce Product Video Gallery</h1>
22          <div className="gallery-container">
23            <div id="video-gallery"></div>
24          </div>
25        </div>
26      );
27    }

Let's break down the code above:

We imported useEffect from React, and from there, initialized the widget.
We set up a div with an ID of video-gallery. This is the element with which we will render the Product Gallery.
cloudinary.galleryWidget(options): initializes the widget. It takes in container, cloudName, and mediaAsset as required parameters.
container: references the div with the ID of image-gallery.
cloudName: the cloud name of our Cloudinary account.
mediaAssets: an array of the media assets we want to display. We populate the widget with all images tagged with dog-picture, as well as all videos tagged with dog-video. We set the mediaType of the images to image and that of the videos to video. This will enable the widget to render the files in their appropriate formats.
productGallery.render(): renders the product gallery widget.

Loading the Product Gallery Widget's script

Next.js provides a Script component that we can use to load third-party scripts in our application. We need the Script component to load the Product Gallery widget's script.

We'll import the Script component into the _app.js file and load the Cloudinary gallery there.

1import "../styles/globals.css";
2    import Script from "next/script";
3    
4    function MyApp({ Component, pageProps }) {
5      return (
6        <>
7          <Script
8            src="https://product-gallery.cloudinary.com/all.js"
9            type="text/javascript"
10          />
11          <Component {...pageProps} />
12        </>
13      );
14    }
15    export default MyApp;

If we run our code, we get the following error: "cloudinary is not defined."

This is because the widget is a client-side tool, and Next.js renders our application on the server. To fix this, we need to change the strategy of the Script.

Thus, update the _app.js file and set the Script's strategy to beforeInteractive.

1function MyApp({ Component, pageProps }) {
2      return (
3        <>
4          <Script
5            src="https://product-gallery.cloudinary.com/all.js"
6            type="text/javascript"
7            strategy="beforeInteractive" //this has to be the strategy
8          />
9          <Component {...pageProps} />
10        </>
11      );
12    }
13    export default MyApp;

The beforeInteractive strategy loads the scripts before the page becomes interactive. Use this strategy for critical scripts that must be fetched and executed before the page is interactive.

Next.js ensures that such scripts are injected into the initial HTML on the server and executed before other self-bundled JavaScript.

If we rerun our code, we see the product video gallery display properly.

Conclusion

This article taught us how to build an ecommerce product video gallery with Next.js and Cloudinary's Product Gallery widget.