MENU


Video

You can either host videos yourselves on your server, or use an external video platform such as YouTube.

While third-party video hosts offer many benefits, self-hosting videos in Next.js offers full control, customization, better performance scalability, and seamless integration -- ideal for tailored needs while balancing cost and independence from third-party platforms.


YouTube   9   is a very popular video host. On your website, you can embed videos hosted on YouTube for free.



Vercel Blob   11834   offers 1GB of free storage. It works very well with Next.js. You can host your videos here:

Access to Vercel Blob has been blocked here because this app is not hosted on Vercel.
Using <Suspense> improves the user experience by allowing the page to remain interactive while the video component loads, preventing any blocking during the streaming process.

Next Video   11834   is a React component that makes it easy to add videos to your Next.js app. It extends the native <video> element with powerful features for seamless video optimization and playback:

To set up Next Video in your Next.js project, run: npx -y next-video init
This will:

If you prefer storing video files in Git, you can remove the .gitignore updates and use git-lfs instead.

Vercel recommends using a dedicated video platform to avoid large bandwidth usage. By default, next-video integrates with Mux, a developer-friendly video API used by major platforms like Patreon. To connect Mux   4695  :

Add the following to your .env.local file: MUX_TOKEN_ID=[YOUR_TOKEN_ID] MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET] You can also modify the package.json script to automatically sync videos as they're added to /videos while the dev server is running. Try to avoid using turbopack as it can prevent video imports. "scripts": { "dev": "next dev & npx next-video sync -w", },
Refer to the official documentations for Mux and next-video for more information on their usage.
import Video from 'next-video';
import awesomeVideo from '../videos/movie3.mp4';
 
export default function Page() {
  return <Video src={awesomeVideo} />;
}

Also take a look at: