{"id":28504,"date":"2022-05-05T08:40:35","date_gmt":"2022-05-05T08:40:35","guid":{"rendered":"http:\/\/create-in-video-ads-in-next.js"},"modified":"2022-05-05T08:40:35","modified_gmt":"2022-05-05T08:40:35","slug":"create-in-video-ads-in-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-in-video-ads-in-next-js\/","title":{"rendered":"Create In-Video Ads in Next.js"},"content":{"rendered":"

More than 80% of people view videos on the Internet regularly, and that people enjoy watching videos with attractive, intelligent, and timely material that isn\u2019t news to anyone.<\/p>\n

When watching ads for their favorite product, customers devote their time and thought. Based on the information offered in the videos, they can make informed selections regarding the products.<\/p>\n

Anyone can gain a competitive advantage over their current market competitors by using in-video advertising. Videos are currently the most efficient means in the advertising space of enhancing a company\u2019s sales.<\/p>\n

This post will teach us how to create in-video ads in Next.js using Cloudinary as our video hosting service.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Code<\/a>S<\/a>andbox<\/a>. Fork and run it to get started quickly.<\/p>\n<\/div>\n \n

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

https:\/\/github.com\/Olanetsoft\/Create-in-video-ads-in-Next.js<\/a><\/p>\n

Getting Started with Next.js<\/h2>\n

Next.js<\/a> is an open-source, React-based frontend development web framework that allows server-side rendering and the generation of static websites and applications.<\/p>\n

To create a new project, we use the npx create-next-app<\/code> command to scaffold a new project in a directory of our choice.<\/p>\n

Once the app is created, and the dependencies are automatically installed, we will see a message with instructions for navigating to our site and running it locally.<\/p>\n

We do this with the following command:<\/p>\n

    cd <project<\/span> name<\/span>><\/span> && npm start\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
To get started, we\u2019ll create a folder called components<\/code>. We\u2019ll also create a file named video.js<\/code> in the root directory and update it with the following code snippet.<\/p>\n
    import<\/span> { useRef } from<\/span> \"react\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> Video<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"video-wrapper\"<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we will import the video<\/code> component we just created in pages\/index.js<\/code> with the following code snippet.<\/p>\n
    import<\/span> Head from<\/span> \"next\/head\"<\/span>;\n    import<\/span> styles from<\/span> \"..\/styles\/Home.module.css\"<\/span>;\n    \n    import<\/span> Video from<\/span> \"..\/components\/video\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n          <Head<\/span>><\/span>\n            <title<\/span>><\/span>Create in-video ads in Next.js<\/title<\/span>><\/span>\n            <meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>=\"Create in-video ads in Next.js\"<\/span> \/><\/span>\n            <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n          <\/Head<\/span>><\/span>\n    \n          <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n            <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>Create in-video ads in Next.js<\/h1<\/span>><\/span>\n            <Video<\/span> \/><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Our application should now look similar to what is shown below.<\/p>\n
\"Create<\/p>\n
Building the video component<\/h2>\n
This section will demonstrate how to implement the in-video ads with the following code snippet.<\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/64930afe3cace27f255fc84739eb9462<\/a><\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/64930afe3cace27f255fc84739eb9462<\/a><\/p>\n
In the code snippet above, we:<\/p>\n
Next.js will initiate a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a>.<\/p>\n