muxinc/next-video

어떤 프로젝트인가요?

핵심 기능

• 01로컬 비디오 파일을 sync 명령으로 원격 스토리지에 동기화하고 자동으로 처리합니다.
• 02대용량 비디오 파일은 Git에서 제외하고 용량이 작은 JSON 메타데이터 파일만 추적합니다.
• 03Mux, 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 저장소에 포함하지 않아도 됩니다. 비디오 파일을 import하면 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