muxinc/next-video

これは何？

主な機能

• 01syncコマンドでローカルの動画ファイルをリモートストレージに同期し、自動で処理します。
• 02小さなJSONメタデータファイルのみを管理し、大容量の動画ファイルをgitから除外できます。
• 03プロバイダーとしてMux、Vercel Blob、Backblaze、Amazon S3、Cloudflare R2をサポートします。
• 04Muxを使って、プレースホルダーポスターとタイムラインのホバーサムネイルを自動生成します。
• 05カスタマイズ可能なプレーヤーテーマと、カスタムプレーヤーコンポーネント用の差し替え枠を備えています。
• 06単体のプレーヤーと背景動画用コンポーネントを利用できます。

ユースケース

• メディアファイルをリポジトリにコミットせずに、Next.jsサイトでマーケティング動画や製品動画を配信する。
• プレーヤーコントロールのない背景動画のヒーローセクションを追加する。
• Muxを利用して、アダプティブストリーミングや字幕が必要な動画を埋め込む。
• 既存のS3またはR2での動画ホスティングをNext.jsのビルドワークフローに移行する。

クイックスタート

1. 1

   Next.jsプロジェクトのルートで自動セットアップを実行します

   npx -y next-video init
2. 2

   Muxのアクセストークンを.env.localに追加します

3. 3

   /videosに動画を追加し、リモートストレージに同期します

   npx next-video sync
4. 4

   開発サーバーを起動して、デモページを開きます

   npm run dev

使う前に知っておきたいこと

• !デフォルトのリモートストレージと最適化を利用するには、Muxアカウントとアクセストークンが必要です。
• !/api/videoルートはデフォルトで認証されていないため、本番環境ではアクセス制限を設定してください。

トピック

よくある質問

next-video とは？

Muxなどのストレージプロバイダーを通じて、動画のアップロード、最適化、CDN配信を自動化するNext.js向けReactコンポーネント。 next-videoは、Next.jsプロジェクト向けにネイティブのvideo要素を拡張するReactコンポーネントです。動画ファイルをローカルの/videosフォルダーに置き、syncコマンドを実行すると、リモートストレージへのアップロードと処理が行われるため、大容量のメディアをgitリポジトリに含めずに済みます。動画ファイルのインポートはアセットオブジェクトとして解決され、Videoコンポーネントでそのまま再生できます。

next-video は無料で使えますか？ライセンスは？

next-video は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

next-video は今もメンテナンスされていますか？

活発にメンテナンス中。next-video の最終コミットは 2026年11月3日 です。

next-video は何に使えますか？

メディアファイルをリポジトリにコミットせずに、Next.jsサイトでマーケティング動画や製品動画を配信する。 プレーヤーコントロールのない背景動画のヒーローセクションを追加する。 Muxを利用して、アダプティブストリーミングや字幕が必要な動画を埋め込む。 既存のS3またはR2での動画ホスティングをNext.jsのビルドワークフローに移行する。

next-video のインストール方法は？

Next.jsプロジェクトのルートで自動セットアップを実行します: npx -y next-video init Muxのアクセストークンを.env.localに追加します /videosに動画を追加し、リモートストレージに同期します: npx next-video sync 開発サーバーを起動して、デモページを開きます: npm run dev

next-video はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/muxinc/next-video