---
lang: ja
path: cookbook/javascript-sdk/nextjs-app-router
labels: クックブック/JavaScript SDK/Next.js App Router の利用方法
metaTitle: Next.js App Router の利用方法 | JavaScript SDK｜ クックブック ｜ SkyWay（スカイウェイ）
---
# Next.js App Router の利用方法
Next.js App Router では、原則としてすべての React コンポーネントをサーバー（Node.js）側でプリレンダリングします。しかし、SkyWay の Room ライブラリはブラウザ上でのみ提供される `RTCPeerConnection` インターフェイスを内部で使用するため、サーバー側ビルド時に読み込むと以下のようなエラーが発生します。

```jsx
'use client';

import { useEffect, useRef } from 'react';
import { SkyWayStreamFactory } from "@skyway-sdk/room";

export default function UserVideo() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    (async () => {
      const media = await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();
			videoRef.current && media.video.attach(videoRef.current);
    })();
  }, []);

  return <video ref={videoRef} autoPlay playsInline />;
}
```

```
ReferenceError: RTCPeerConnection is not defined
```

`use client` を付与したファイルでも、プリレンダリング（サーバー実行）段階で行われるため、エラーを回避できません。

## 解決策

### 1. Next.js `dynamic()` で SSR 無効化

Next.js の `next/dynamic` を使い、特定コンポーネントのサーバーサイドレンダリング（SSR）をオフにします。そのコンポーネントは全てクライアントのみでレンダリングされるため、上述のエラーを回避することができます。

- [next/dynamic](https://nextjs.org/docs/pages/guides/lazy-loading)

**components/UserVideo.tsx**

```jsx
'use client';

import { useEffect, useRef } from 'react';
import { SkyWayStreamFactory } from '@skyway-sdk/room';

export default function UserVideo() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    (async () => {
      const media = await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();
      videoRef.current && media.video.attach(videoRef.current);
    })();
  }, []);

  return <video ref={videoRef} autoPlay playsInline />;
}
```

**app/page.tsx**

```jsx
import dynamic from 'next/dynamic';

const UserVideo = dynamic(
  () => import('@/components/UserVideo'),
  { ssr: false }
);

export default function Page() {
  return (
    <main>
      <h1>SkyWay Room サンプル</h1>
      <UserVideo />
    </main>
  );
}
```

### 2. dynamic import（React コンポーネント内で読み込む）

React コンポーネントで動的にインポートする方法です。プリレンダリング時にはモジュールの読み込みがスキップされ、クライアントでのみ実行されます。

```jsx
'use client';

import { useEffect, useRef } from 'react';

export default function UserVideo() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    (async () => {
      const { SkyWayStreamFactory } = await import('@skyway-sdk/room');
      const media = await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();
			videoRef.current && media.video.attach(videoRef.current);
    })();
  }, []);

  return <video ref={videoRef} autoPlay playsInline />;
}
```

上記いずれかの方法により、Next.js App Router でも SkyWay Room ライブラリをご利用いただけます。