Next.js + React + Typescript프로젝트에 local video 로컬영상넣기

한줄요약 : next-videos 써야 로컬폴더의 영상 불러올 수 있음
https://www.npmjs.com/package/next-videos?activeTab=readme

---

지난번 포스팅에 올렸듯 원래 firebase storage에 영상을 넣고 그 링크를 react-player(설치해야됨) 안에 url로 넣은 다음 페이지에 불러오는 방식으로 백그라운드 영상재생을 구현했었다.

그런데 잘 되다가 갑자기 콘솔에 firebase error가 찍히면서 빈 화면이 뜸. 설마설마하면서 firebase storage에 들어가봤다.

프로젝트 용량 초과^^

파베 너를 믿은 내가

react-player를 썼던 원래 코드

import { useEffect, useState } from "react";
import ReactPlayer from "react-player/lazy";
// import ReactPlayer from "react-player/youtube";

const Video = () => {
    const [hasWindow, setHasWindow] = useState(false);
    useEffect(() => {
        if (typeof window !== "undefined") {
            setHasWindow(true);
        }
    }, [hasWindow]);

    return (
        <>
            {hasWindow && (
                <ReactPlayer
                    className="react-player"
                    url={"https://firebasestorage.googleapis.com/v0/b/~~~"
                    } // 영상 url
                    width="100%"
                    height="650px"
                    playing={true} // 자동 재생 on
                    muted={true} // 음소거 on
                    controls={false} // 플레이어 컨트롤 노출 여부
                    light={false} // 플레이어 모드
                    pip={false} // pip 모드 설정 여부
                    loop={true} // 반복재생
                />
            )}
        </>
    );
};

export default Video;

참조 : https://shinsangeun.github.io/posts/react/react-player

첫번째 시도

import React, { useEffect, useState } from "react";

const Video: React.FC = () => {
    const [hasWindow, setHasWindow] = useState(false);
    useEffect(() => {
        if (typeof window !== "undefined") {
            setHasWindow(true);
        }
    }, [hasWindow]);

    return (
        <>
            {hasWindow && (
                <video
                    autoPlay
                    muted
                    loop
                    style={{ width: "100%", height: "500px" }}
                 >
                    <source src="/public/assets/food.mp4" type="video/mp4" />
                </video>
            )}
        </>
    );
};

export default Video;

경로가 맞는데도 불구 파일을 import해 오지 못했다.
찾아본 결과 next는 외부링크가 아닌 프로젝트폴더에 들어있는 영상을 불러 오는데도 next-videos라는 라이브러리를 따로 설치해야 했다.

npm i next-videos

next.config.js에 저렇게 선언을 해 주고 문법대로 쓰면 된다.
사용하기는 간단해서 다행인듯.

전체코드

import React, { useEffect, useState } from "react";

const Video: React.FC = () => {
    const [hasWindow, setHasWindow] = useState(false);
    useEffect(() => {
        if (typeof window !== "undefined") {
            setHasWindow(true);
        }
    }, [hasWindow]);

    return (
        <>
            {hasWindow && (
                <video
                    autoPlay={true}
                    muted={true}
                    loop={true}
                    style={{ width: "100%", height: "650px" }}
                    src={require("../../public/assets/food.mp4")}
                />
            )}
        </>
    );
};

export default Video;

---

로컬폴더에 영상을 넣으니 확실히 로딩시간이 길어졌다.
다른 최적화 방법을 찾아봐야 겠다.