Next.js 14 has come with many interesting changes, introducing the App Router as the main source where the program unwraps from.
When you want to add a video to your website, you should start by creating a component. Let's make our own Video
component to be added to the page, where our video test.mp4
will be inserted:
export default function Video(): React.ReactNode {
return (
<video width="1200" height="720" controls>
<source src="test.mp4" type="video/mp4" />
</video>
);
}
The video you are referencing must be placed inside the public
directory. The public
directory is where all of your static assets should be placed: images, videos, icons, and whatnot. Next.js 14 has been assembled to read src files straight from that directory. If it is, you can pass the src
attribute a simple string with the exact video file's name, and it will be displayed on your website.
After building and exporting your Video
component, import it from the app
directory's page.tsx
file, where your website is displayed from:
import Video from "./components/Video";
export default function Home() {
return (
<>
<Video />
</>
);
}
As you can see in the import
statement at the top of the file, I am importing from the app/components
directory. It is good practice to organize your files that way so that it is easier to maintain and expand upon your previous code.
After doing the above, your video should be displayed successfully on the website.
Hope it is of use to anyone! I struggled to find documentation on how to set the src
attribute correctly, and wanted to share this after figuring it out to save someone else's brains some neurons. 🧠
Top comments (0)