Next.js LogoNext Video Logo

Add high-performance video to your Next.js app

next-video solves the hard problems with embedding, storing, streaming, and customizing video.

What’s included

Everything you need to add beautiful video to your Next.js application

Get started fast

Follow the video tutorial

Watch a quick walkthrough video showing how to set up and use next-video

  1. npx -y next-video init to get started

  2. Add a video to your /videos folder

  3. Add the component to your app

    import Video from 'next-video';
    import myVideo from '/videos/my-video.mp4'; 
     
    export default function Page() { 
       return <Video src={myVideo} />;
    }

Or check out the docs for manual configuration.

Built on high-performance video streaming infrastructure

Plug in your own video infrastructure provider, or use the default provider, Mux. Mux is a video API for developers whose video tools are used on the largest streaming sites and live events in the world.

Mux logo