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

1import Video from 'next-video';
2import myVideo from '/videos/my-video.mp4';
3
4export default function Page() {
5  return <Video src={myVideo} />;
6}
7

Install the package

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

1# Using NPM
2npm install next-video
3
4# Using Yarn
5yarn add next-video
6
7# Using pnpm
8pnpm add next-video
9

Run the init wizard

1npx next-video init
2

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:

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

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.

1npx next-video sync
2

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.

1import Video from 'next-video';
2import awesomeVideo from 'https://www.mydomain.com/remote-video.mp4';
3
4export default function Page() {
5  return <Video src={awesomeVideo} />;
6}
7

Custom Player

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

1import Video from 'next-video';
2import { ReactPlayerAsVideo } from './player';
3import awesomeVideo from '/videos/awesome-video.mp4';
4
5export default function Page() {
6	const videoUrl = "videoUrl";
7  return <Video as={ReactPlayerAsVideo} src={awesomeVideo} />;
8}
9

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.

1# Clone this repo
2git clone https://github.com/username/your-repo.git
3
4# cd into the repo
5cd project
6
7# Install dependencies and build
8npm install && npm run build
9
10# Go back to wherever you want to create a test app
11cd ../
12
13# Create a new Next.js app
14npx create-next-app
15
16# Go into your new app
17cd your-next-app
18
19# Link the next-video package
20npx link ../next-video
21
22

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.