TIL 23.08.29 next.js 동영상 삽입하기

next.js 에 동영상을 삽입하려면 일반적인 방식인 src 하위폴더에 넣고 절대경로로 import 하는 것이 안된다.

 

해야하는 것

 

1. 라이브러리 설치하기... 대체 왜 라이브러리까지 설치해야 하나 싶지만 일단 해야되니까.. 

 

yarn add next-videos

 

2. next.config.js 에 다음 코드 추가

 

// video
const withVideos = require("next-videos");

module.exports = withVideos();

 

3. 동영상폴더를 public 안에 넣은 뒤 상대경로로 import 하기

 

          <video
            autoPlay={true}
            muted={true}
            loop={true}
            src={require("../../../public/assets/environment.mp4")}
          />