next.js video import vs reference - what is the next.js way to import videos?

Question

I am adding a video as a background inside of the banner.

I am using next.js and usually with images I would just import them and then pass this import as src (e.g. import img from '@images/about-us-page/img.svg').

Currently when I try doing the same with mp4 video its not displaying the file inside of the files available to be imported. When I use require instead it complains that webpack needs to be configured.

What is the most performence efficent way to import videos? Would that be creating videos dir in public and then just referencing in?

Would reference public for images also be a better solution than importing images?

regards

Answer 1

I know this is a bit late, but for future reference... Vercel did not add the video loader in their bundler config, as a plugin, on purpose, since having large files hosted and having to be built, etc... can increase a lot the bandwidth usage. So it's usually a good practice to host your assets on a cloud service like Cloudinary or a CDN service and just retrieve them when needed. If it's a small optimized video you can still import it adding the video loader to next.config.js which is basically a webpack plugin: https://github.com/jeremybarbet/next-videos