[Next.js 14][next-video] 메인 화면에 배경 영상(background video) 넣기

개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 Next.js documentation을 뜯어봤다.

여기서 Mux-video-api를 소개하고 있길래, 이걸로 비디오 넣는게 보편적인 방법이겠거니 싶어 해보았다.

Optimizing: Videos | Next.js

위 사진처럼 굉장히 깔끔했다. (코드는 아래에 있음)

 

next-video 패키지 설치

Embed a video player in your Next.js applications | Mux

npm install next-video
// or
yarn add next-video

 

설치 이후에 아래의 커맨드로 initialize하면 /videos라는 폴더가 생기고 등등의 과정이 필요하다고 하는데, 나는 안 해도 잘 됐다.

npx next-video init

(만약 나중에 deploy할 때 필요하면 내용을 수정하러 오겠다.)

 

환경 변수에 Mux 자격 증명 추가

(여기도 마찬가지로, 안해도 잘 되긴 했는데 나중에 문제가 생기면 내용을 수정하러 오겠다.)

 

GitHub - muxinc/next-video: The easiest way to add video in your Nextjs app.

mux가 기본값이긴 한데, gitHub을 살펴보니 Mux 외에도 vercel-blob, amazon-s3 등의 provider을 설정할 수 있다.

그래도 일단 mux 기준으로 설명하자.

Mux는 API 인증을 위해 액세스 토큰을 사용하는데, 이 토큰은 Mux에 로그인해서 확인할 수 있다(가입해야 함).Mux 대시보드에 로그인하면 사이드바에서 Settings > Access Tokens 에서 새로운 토큰을 생성할 수 있다.

우리는 비디오를 추가할 거니까 Permissions에서 Mux Video의 Write와 Mux Data (read only)를 선택해서 토큰을 생성한다.

 

토큰이 생성되었으면, 이를 프로젝트에 추가해야 한다.

.env.local 파일에 (없으면 생성해서) 아래의 코드를 추가해주자.

MUX_TOKEN_ID=YOUR_TOKEN_ID
MUX_TOKEN_SECRET=YOUR_TOKEN_SECRET

 

이제 앞서 생성된 /videos 폴더에 배경 영상을 넣은 후 터미널에서 아래의 커맨드를 실행한다.

npx next-video sync

 

이렇게 하면 이제 Mux 대시보드의 Video > Assets 에서 영상을 확인할 수 있다.

 

 

영상(비디오) 추가

아래에서 볼 수 있듯이, 비디오를 넣는 코드는 정말 간단하다.

속성 없이 src만 설정해주면 비디오 플레이어가 들어가는데, 이걸 배경에서 계속 재생되는 비디오로 설정하기 위해서 아래와 같은 속성을 추가로 작성해주자.

import Video from 'next-video';

export default function Home() {
  return (
    <main>
      <Video
        src={'/videos/bg.mp4'} // 비디오 파일 경로
        autoPlay
        muted
        loop
        playsInline
        controls={false}
      ></Video>
    </main>
  )
}

 

 

끗~