---
title: "Next.js용 플레이어 적용"
slug: "vpe-example-next"
updated: 2026-08-20T09:03:39Z
published: 2026-08-20T09:03:39Z
canonical: "guide-gov.ncloud-docs.com/vpe-example-next"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide-gov.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js용 플레이어 적용

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](https://beta.nextjs.org/docs/rendering/server-and-client-components)를 참고해 주십시오.

![vpe-example_nextjs_ko](https://cdn.document360.io/f2d93c92-8957-408f-94df-b9b370f76a32/Images/Documentation/vpe-example_nextjs_ko.png)

          참고

          

React 관련 기능은 클라이언트 컴포넌트로 작성해야 사용할 수 있습니다. Next.js 파일 첫 행에 `'use client'`를 입력하면 해당 파일은 클라이언트 컴포넌트로 취급됩니다.

## 함수를 사용한 스크립트 로드

Next.js에서는 클라이언트 컴포넌트를 생성하여 외부 스크립트를 로드하는 방법을 통해 플레이어를 적용할 수 있습니다. `<Script>` 태그를 사용하여 외부 스크립트를 호출하고, `strategy` 속성을 사용하여 페이지 호출 랜더링이 끝날 때 스크립트를 안정적으로 가져올 수 있습니다. `onLoad()` 속성의 함수를 사용하여 스크립트 로딩이 완료될 때 함수를 실행하려면 다음 코드와 같이 작성해 주십시오.

- `page.js` 파일

```
'use client'; // 클라이언트 컴포넌트로 취급
import Script from 'next/script' // Script 태그를 사용하기 위해 불러오기

const access_key = "VPE SDK Access Key"; // 발급받은 VPE 라이선스 키

function createPlayer(id) {
    let player = new ncplayer(id, {

        "playlist": [
            {
                  file:"https://m4qgahqg2249.edge.naverncp.com/hls/a4oif2oPHP-HlGGWOFm29A__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_,FHD_2Pass_30fps,HD_2Pass_30fps,SD_2Pass_30fps,.mp4.smil/master.m3u8",
					        poster:"https://2ardrvaj2252.edge.naverncp.com/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_01.jpg",
					        description:{
					          "title":"네이버클라우드 테스트 영상",
					          "created_at":"Wed Jul 13 2022 00:00:00 GMT+0900 (한국 표준시)",
					          "profile_name":"네이버클라우드",
					          "profile_image":"https://player.vpe.naverncp.com/images/d127c8db642716d84b3201f1d152e52a.png"
					        },
            }
        ],

        // options...
    });
}

export default function DemoPlayer() {
    return (
        <>
            <Script
                src={`https://player.vpe.naverncp.com/ncplayer.js?access_key=${access_key}`}
                strategy="lazyOnload"
                onLoad={() => {
                    createPlayer('video')
                }
            }>
            </Script>
            <main>
                <div>
                    <div id="video"></div>
                </div>
            </main>
        </>
    )
}
```