Classic/VPC 환경에서 이용 가능합니다.
Next.js용 플레이어 적용에서는 Video Player Enhancement Web SDK JS를 활용하여 플레이어를 적용하고 설정하는 예제를 설명합니다.
Next.js 예제를 실행하려면, 다음과 같은 환경이 요구됩니다.
- Next.js 버전: 12.x 이상
- React 버전: 17.x 이상
Next.js의 특성 이해
Video Player Enhancement 서비스를 적용하기 전에 Next.js의 특성을 반드시 고려해 주십시오.
Next.js 버전 13에서는 모든 컴포넌트가 서버 컴포넌트이기 때문에 CSR 방식으로 클라이언트 컴포넌트를 사용하려면 "use client";
를 사용해야 합니다. 클라이언트 컴포넌트를 만드는 방법은 Next.js 공식 홈페이지에서 확인할 수 있습니다. 공식 홈페이지에서는 서버 컴포넌트를 사용할 경우와 클라이언트 컴포넌트를 사용할 경우를 명확히 구분하여 안내합니다. Rendering: Server and Client Components | Next.js를 참고해 주십시오.
React 관련 기능은 클라이언트 컴포넌트로 작성해야 사용할 수 있습니다. Next.js 파일 첫 행에 'use client'
를 입력하면 해당 파일은 클라이언트 컴포넌트로 취급됩니다.
함수를 사용한 스크립트 로드
Next.js에서는 클라이언트 컴포넌트를 생성하여 외부 스크립트를 로드하는 방법을 통해 플레이어를 적용할 수 있습니다.
<Script>
태그를 사용하여 외부 스크립트를 호출하고, strategy
속성을 사용하여 페이지 호출 랜더링이 끝날 때 스크립트를 안정적으로 가져올 수 있습니다. onLoad()
속성의 함수를 사용하여 스크립트 로딩이 완료될 때 함수를 실행하려면 다음 코드와 같이 작성해 주십시오.
page.js
파일