How to Create a Video Background Component Using Next.js
HTML-код
- Опубликовано: 6 июн 2024
- Uncover the intricacies of constructing a captivating background video component in NextJS! Follow along with this comprehensive, step-by-step tutorial, where I'll expertly guide you through creating a distinctive and interactive background video component from the ground up.
🔗 Get the github file from here: tutorials.emersonvisuals.com/...
📦 NPM Package (Next-Videos): www.npmjs.com/package/next-vi...
📚 Next-JS Installation Guide for Beginners: nextjs.org/docs/getting-start...
🔧 Node and NPM Installation Guide: docs.npmjs.com/downloading-an...
🚀 Explore More Tutorials: tutorials.emersonvisuals.com/
Video Timeline:
- 00:00 - Introduction
- 00:34 - Resources & Important Files
- 01:42 - Creating a NextJS project
- 03:48 - Starting page.tsx structure & video import
- 04:49 - Importing next-videos NPM package
- 06:32 - Refining page.tsx structure
- 09:23 - CSS styling
- 14:02 - Conclusion
Empower yourself with this tutorial and enhance your skills in frontend development and design!
The music used in this video is "Chill day" by LAKEY INSPIRED. You can find more of his music on his official RUclips channel: ruclips.net/channel/UCOmy...
This track is licensed under the Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License. You can read the full license here: creativecommons.org/licenses/...
The music is promoted by NCM goo.gl/fh3rEJ.
ATTENTION EVERYONE: If you are using a next.config.mjs file RATHER than a next.config.js file the syntax shown in the video will not work. If you wish to use the next.config.mjs file then use the following syntax as an alternative to solve the issue:
/** @type {import('next').NextConfig} */
import withVideos from "next-videos";
const nextConfig = {
/* config options here */
};
export default {
...nextConfig,
...withVideos(),
};
Thanks everyone - happy coding
Save my day! Thank you!
I’m glad!! 😊
Great work thank you!!
Glad you liked it!
Thank you
Any time 😊
Hey everyone, thanks for tuning in! If you would like to see more content related to Next.js I just released a new project here ruclips.net/video/uYrtKrn3Gy0/видео.html
thanks bruv
No worries!
great video, but i'm facing a problem. Video just works fine in localhost, but when i deploy to vercel, it does not show up
Hi friend, how can we implement the animated website design in Figma, which has a prototype, animations, and component animation variables, so that we can make the same working on React J's and Next J's using the Figma design? Is this possible and can you create a tutorial related to this?
Thank You brother. What technologies do you work with and what do you do? Web development?
Hey mate I appreciate it! For my current fulltime job I currently work as a Fullstack Designer with Deloitte Digital - so I specialise in UX, UI and Frontend Development (so a lot of web design, app design and web development)
For my RUclips account I basically do the same thing - UX, UI and Frontend Development but make tutorials instead for fun 😊
Next-videos is not working properly if you want to deploy the app on github pages for example.
what about performance? example does it affect the video loading if a user lands on the page and has slow internet. i know it depends on the video size but does it matter if its just added on the hero as a background like the example you provided?
I would say it would depend on the file size! The higher the mb, the slower and poorer the performance becomes :)
Thank you for introducing the next-videos package. For some reason, the normal react "import" does not work for me
Hey Victor! Yes, I faced the same issue when I started using Next.js. I discovered that the standard 'import' method for React doesn't work well with videos in Next.js. Instead, to make it work, you need to access the public path. For instance, instead of:
```jsx
import Video from '../../public/video.mp4';
```
You should access it from the public path within the code structure, not at the top of the page:
```jsx
```
Make sure to use curly brackets. This approach aligns with Next.js conventions for handling static assets.
If you notice it’s not working, the next step is to use the next-videos package and follow those steps. This should then work.
Hope this helps!
But when you build the app and deploy it, the video does not get render (on Firebase)
Not 100% sure but it could be related to the video size? How many MB’s is it?
after deployment the video does not appears, how to fix this issue?
Hey there - what website / platform are you using to deploy the video? If you are using netlify, you shouldn't have any issues but let me know if you are using something else I can have a look for you!
@@emersonvisuals Hello, thank you for sharing. I am facing the same issue and i deployed to netlify with video size of 12mbs.
Edit:
I just added "use client" and it fixed the issue.
Is it performant for web perf?
It should! 😊
@@emersonvisuals It works exactly like default video tag in my case. What exactly does it do differently?
bro - you are the best😍
Thanks so much, I appreciate it ❤️
What are the benefits of using next-videos indtead of explicitly coding a react component with video tag?
The next-videos npm package facilitates the loading and usage of videos locally within Next.js projects. In contrast to React, where the tag can be used without issues, Next.js presents challenges when using this tag due to its server-side rendering (SSR) nature. Next.js determines whether components render on the server or client side, which can lead to errors and issues when using the tag directly. Therefore, to manage video playback effectively in Next.js, utilizing packages like next-videos is recommended.
Yes I changed the next.config.mjs to what you wrote below then I got this error: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'next-videos' imported from C:\Users\Home\securedataexchange
ext.config.mjs
at packageResolve (node:internal/modules/esm/resolve:853:9)
at moduleResolve (node:internal/modules/esm/resolve:910:20)
at defaultResolve (node:internal/modules/esm/resolve:1130:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Can You Help me out?
Great work thank you!!
Glad you liked it!