{"id":27868,"date":"2021-07-27T20:01:05","date_gmt":"2021-07-27T20:01:05","guid":{"rendered":"http:\/\/Using-Shoppable-Video-in-Next.js"},"modified":"2021-07-27T20:01:05","modified_gmt":"2021-07-27T20:01:05","slug":"using-shoppable-video-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/using-shoppable-video-in-next-js\/","title":{"rendered":"Using Shoppable Video in Next.js"},"content":{"rendered":"

YouTube, Twitch, and TikTok are some of the most used platforms to promote and advertise products. According to Blog Hubspot<\/a>, consumers prefer videos to images because videos give a better overview of the product.<\/p>\n

Shoppable Video is an e-commerce feature by Cloudinary that allows users to add \u201cshoppable\u201d items in their product videos. This feature will enable customers to shop while watching your videos. The customers can shop the items that are then added to the cart. They will be redirected to a page to make a purchase when done shopping.<\/p>\n

In this article, we will learn how we can render Shoppable videos in a NextJS app.<\/p>\n

You can learn more on Shoppable video from the Cloudinary documentation<\/a>.<\/p>\n

This Shoppable Video feature is included in Cloudinary\u2019s video package. Therefore, we can use the Cloudinary package to add the Shoppable Video feature to our videos. We will also learn how to render data of any selected item in the shoppable video\u2019s product bar.<\/p>\n

To demonstrate this, we will build a Next.js web app. This app will render the product videos on an index page. We will have a product details page, and this page will open to display a product when it\u2019s clicked on the product bar.<\/p>\n

On the product details page, the product\u2019s name, price, image are shown, and an Add to Cart<\/code> button to add the product to our shopping basket.<\/p>\n

Our final app will look like this:<\/p>\n

\"\"<\/p>\n

Sandbox<\/h2>\n

The entire project was completed on CodeSand<\/a>b<\/a>ox<\/a>. Fork it to run the code.<\/p>\n

    \n<\/code><\/span><\/pre>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
\nGitHub URL: https:\/\/github.com\/nextjs-prj\/cloudinary-shoppable\n\n## Prerequisites & Installation\n\nThe knowledge of JavaScript and React.js is required for this project. We require a Node.js binary and NPM, its package manager installed.  \n\nTo create a new Next.js app, we open the terminal in our desired directory and run the below command:\n\n```bash\n    yarn create next-app nextjs-shop\n    # OR\n    npx create-next-app nextjs-shop\n<\/code><\/pre>\n
Alternatively, you can create a Next.js project using yarn<\/a>, as seen above.<\/p>\n
This command will create a Next<\/code> app in the nextjs-shop<\/code> directory. We move into the directory with the command cd nextjs-shop<\/code>.<\/p>\n
The Shoppable Video feature was built by Cloudinary; therefore, to add the feature to our app, we have to install Cloudinary\u2019s SDK and its dependencies, which include the following:<\/p>\n