---
title: "Next.js用プレイヤーの適用"
slug: "vpe-example-next"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-example-next"
stale: true
---
> ## Documentation Index
> Fetch the complete documentation index at: https://guide.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/ja/rendering/server-and-client-components)をご参照ください。
参考
React関連機能はクライアントコンポーネントで作成しないと使用できません。Next.jsファイルの第一行に `'use client'`と入力すると、そのファイルはクライアントコンポーネントとして扱われます。
## 関数を使用したスクリプトのロード
Next.jsでは、クライアントコンポーネントを作成し、外部スクリプトを読み込む方法を通じて、プレーヤーを適用できます。 `<Script>` タグを使用して外部スクリプトを呼び出し、 `strategy` 属性を設定してページのレンダリングが完了した後にスクリプトを安定して取得できます。 `onLoad()`属性に関数を設定して、スクリプトの読み込み完了時に関数を実行するには、以下のコードのように記述してください。
- `page.js` file
```
'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 (KST)",
"profile_name":"네이버클라우드",
"profile_image":"https://player.vpe.naverncp.com/images/d127c8db642716d84b3201f1d152e52a.png"
},
}
],
// options...
});
}
export default function DemoPlayer() {
return (
<>
)
}
```
React関連機能はクライアントコンポーネントで作成しないと使用できません。Next.jsファイルの第一行に `'use client'`と入力すると、そのファイルはクライアントコンポーネントとして扱われます。