---
title: "VPE 2.0 React prerequisites"
slug: "vpe-v2-react-spec"
updated: 2026-09-17T09:22:36Z
published: 2026-09-17T09:22:36Z
canonical: "guide.ncloud-docs.com/vpe-v2-react-spec"
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.

# VPE 2.0 React prerequisites

Available in Classic and VPC

## Supported environments

The VPE player requires the `platform` value to distinguish playback environments. The following two platform values are available:

- `pub`: Public cloud environment
- `gov`: Government cloud environment

## Example

### React example

Pass `platform` as a prop to the `VpePlayer` component.

```
"use client";

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function PlayerPage() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            platform="pub"
            hls={Hls}
            dashjs={dashjs}
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/example_video_01.mp4",
                        poster: "https://CDN_DOMAIN/example_video_01.png",
                    },
                ],
            }}
        />
    );
}
```

### UMD example

In UMD, do not use the `platform` props. Use the CDN script endpoint to distinguish between public and government cloud environments.

Public

```
<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
```

Government

```
<script src="https://player.vpe.gov-ntruss.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
```

```
<script>
    const player = new ncplayer("player", {
        playlist: [
            { file: "https://CDN_DOMAIN/example_video_01.mp4" },
        ],
    });
</script>
```

## Install packages

In a React or Next.js project, install the VPE SDK using `npm` or `pnpm`.

When you use `npm`:

```
npm i @sgrsoft/vpe-react-sdk
```

When you use `pnpm`:

```
pnpm add @sgrsoft/vpe-react-sdk
```

## Peer dependencies

Install the libraries required for the streaming protocols you use. The SDK does not bundle these libraries, so you only need to install the ones required for your protocols.

| Protocol | Package | Description |
| --- | --- | --- |
| HLS | hls.js | HLS streaming playback (required) |
| DASH | dashjs | DASH streaming playback (optional) |

```
# HLS streaming (required)
npm i hls.js

# DASH streaming (optional)
npm i dashjs
```

## Next.js settings

When you use VPE with Next.js, you need the `&quot;use client&quot;` directive. VPE components use browser APIs, so you must render them as client components.

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function PlayerPage() {
    return (
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
            <VpePlayer
                hls={Hls}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: "https://example.com/video/master.m3u8",
                    }],
                    autostart: true,
                    muted: true,
                    aspectRatio: "16/9",
                }}
            />
        </div>
    );
}
```

## Use DASH streaming

To use the DASH protocol, dynamically import `dashjs` and pass it to the player.

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { useEffect, useState } from "react";

export default function PlayerPage() {
    const [dashjs, setDashjs] = useState(null);

    useEffect(() => {
        import("dashjs").then((mod) => {
            setDashjs(mod.default ?? mod);
        });
    }, []);

    return (
        <VpePlayer
            hls={Hls}
            dashjs={dashjs}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/stream.mpd>",
                }],
            }}
        />
    );
}
```

## LLM-based code generation

This guide helps you quickly get started with VPE player configuration. Provide `llms.txt` as a prompt so the AI can generate Next.js-based sample code.

### Concepts

`llms.txt` is a summary document containing the core usage rules of the VPE player. Providing this file to the LLM first helps you prevent the omission of essential options, and recommended configurations when the model generates code.

### Select an LLM

Copy and paste the prompt below into the LLM you are using (e.g., ChatGPT, Claude, Copilot, Cursor, etc.):

### Enter the prompt

```
Read https://developer.vpe.naverncp.com/llms.txt and generate React sample code.
```

### Guide

- You must replace the `accessKey` and `playlist` URL within the response code to match your project environment.
- If you use HLS, check whether `hls.js` injection is required.
- If the response is too long, you can also ask, "Summarize only the relevant sections."