Next Video: A React Component for Video Integration in Next.js Applications

Next Video is a React component that allows you to add videos to your Next.js applications easily. It extends both the <video> element and your Next.js app with features for automatic video optimization. Support app router, too.

Features of Next Video

• Smart Storage: Store large video files outside of your git repo.
• Auto Optimization: Optimize video files automatically and deliver via CDN for improved playing performance and quality.
• Customizable UI: Choose from themes or build your player controls. Complete control. Removes challenges.
• Posters & Previews: Zero-config placeholder images and timeline hover thumbnails.
• Wider Compatibility: Use videos that aren’t supported natively by all browsers.
• Built-in Analytics (optional): See how often videos get watched and track performance. Data oriented.
• AI-powered: Whisper captions are coming soon.

Basic Usage

Copy
1
2
3
4
5
6
import Video from 'next-video';
import myVideo from '/videos/my-video.mp4';

export default function Page() {
  return <Video src={myVideo} />;
}

Install the package

Navigate to your Next.js app directory and install the next-video using your preferred package manager.

Copy
1
2
3
4
5
6
7
8
# Using NPM
npm install next-video

# Using Yarn
yarn add next-video

# Using pnpm
pnpm add next-video

Run the init wizard

Copy
1
npx next-video init

This command will:

• Install next video as a dependency.
• Update your next.config.js file.
• If you're using TypeScript, add types for your video file imports.
• Create a /videos directory in your project, where you will put all video source files.

Remote storage and optimization

By default, next-video uses Mux for video storage and optimization. To use Mux, sign up for an account, create an access token, and add the following environment variables to your .env.local file:

Copy
1
2
3
# .env.local
MUX_TOKEN_ID=[YOUR_TOKEN_ID]
MUX_TOKEN_SECRET=[YOUR_TOKEN_SECRET]

Local Videos

Add videos locally to the /videos directory, then run npx next-video sync. The videos will be automatically uploaded to remote storage and optimized.

Copy
1
npx next-video sync

Remote Videos

Import the external URL and refresh the page for films already hosted remotely (for example, on AWS S3). The sync script will begin uploading the video after creating a local JSON file in the /videos folder.

Copy
1
2
3
4
5
6
import Video from 'next-video';
import awesomeVideo from 'https://www.mydomain.com/remote-video.mp4';

export default function Page() {
  return <Video src={awesomeVideo} />;
}

Custom Player

You can customize the player by passing a custom player component to the as prop.

Copy
1
2
3
4
5
6
7
8
import Video from 'next-video';
import { ReactPlayerAsVideo } from './player';
import awesomeVideo from '/videos/awesome-video.mp4';

export default function Page() {
	const videoUrl = "videoUrl";
  return <Video as={ReactPlayerAsVideo} src={awesomeVideo} />;
}

Roadmap

• v0: Automatic video optimization, delivery via a CDN, automatically upload and process local source files, automatically process remote hosted source files.
• v1: Customizable player, connectors for additional video services, AI captions, kitchen sink template.

Try it out locally

If you want to develop this thing locally, you can clone and link this.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Clone this repo
git clone https://github.com/username/your-repo.git

# cd into the repo
cd project

# Install dependencies and build
npm install && npm run build

# Go back to wherever you want to create a test app
cd ../

# Create a new Next.js app
npx create-next-app

# Go into your new app
cd your-next-app

# Link the next-video package
npx link ../next-video