How to add a video into your website in Next.js 14

Henrique Magalhães — Tue, 14 May 2024 22:05:43 +0000

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. 🧠

DEV Community: Henrique Magalhães

How to add a video into your website in Next.js 14