NextJS에서 유튜브 썸네일사용하기

구현 내용

NextJS 화면을 구현을 하는 도중에 아래와 같은 화면을 구현했어야한다.
고민을 해보고 iframe으로 구현을 하면 되겠다라고 생각을 했다.

NextJS에서 구현을 할 때 외부 URL을 불러오고 뿌려주고 하는 부분이 익숙하지 않아서 삽질을 했다.

NextJS에서 외부 링크로 이미지를 불러오거나 할 때 next.config.js파일에 URL를 추가해줘야한다.

next.config.js 파일 수정

img.youtube.com 를 추가해주었다.
간략하게 설명을 하자면 img.youtube.com는 유튜브의 썸네일을 불러오기 위한 주소이다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  images: {
    domains: [ 'localhost', '*', 'img.youtube.com'],
  },


};

module.exports = nextConfig;

구현 코드

전체적으로 코드 자체는 쉽다.
YOUTUBE_PLAY_URL : 영상을 재생하는 URL
YOUTUBE_IMG_URL: 썸네일을 불러오는 URL
YOUTUBE_PLAY_LIST: 재생 또는 썸네일을 불러올 영상의 ID 값

const YOUTUBE_PLAY_URL = 'https://www.youtube-nocookie.com/embed/';
const YOUTUBE_IMG_URL = 'https://img.youtube.com/vi/';
const YOUTUBE_PLAY_LIST = [
  {
    videoId: '08BbExqhcWw',
  },
  {
    videoId: 'jfKfPfyJRdk',
  },
  {
    videoId: 'alLs9S4pwo0',
  },
];

영상은 iframe을 이용해서 보여주면 된다.

  <iframe
    width="690"
    height="450"
    src={YOUTUBE_PLAY_URL + currentVideo}
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen />

YOUTUBE_IMG_URL 변수에 선언된 https://img.youtube.com/vi/ 주소는 썸네일을 불러오기 위한 주소값이다. <Image /> 태그를 이용해서 썸네일을 보여준다.
Image로 가져오기 위해서 아래와 같은 형태로 가져올 수 있다.

썸네일 가져오는 예시

https://img.youtube.com/vi/jfKfPfyJRdk/0.jpg
https://img.youtube.com/vi/jfKfPfyJRdk/mqdefault.jpg
https://img.youtube.com/vi/jfKfPfyJRdk/default.jpg

작업을 하면서 mqdefault.jpg로 YOUTUBE_IMG_URL + video.videoId + '/mqdefault.jpg' 형태로 썸네일을 추출했다.

하지만 가져오고 나니 영상의 재생 버튼이 없어서 조금 허전했다.
디자인 상으로도 플레이 버튼이 있어야 했기도 헀다.

그래서 별도로 이미지를 첨부시켜 각 썸네일마다 버튼을 추가 시켰다.

    <div
        className="relative left-0 top-0 mb-[4px] flex h-[102px] w-[163px] cursor-pointer items-center justify-center bg-[#404040]"
        key={idx}
        onClick={() => setCurrentVideo(video.videoId)}>
        <div className="common-absolute-center">
            {/* 유튜브 플레이 버튼 svg 파일*/}
            <SVGYouTubePalyButton className="h-[30px] w-[30px]" />
        </div>
        <Image
            width="163"
            height="102"
            src={YOUTUBE_IMG_URL + video.videoId + '/mqdefault.jpg'}
            alt="youtube_thumbnail"
        />
     </div>