Next.js App Router の利用方法

Next.js App Router では、原則としてすべての React コンポーネントをサーバー（Node.js）側でプリレンダリングします。しかし、SkyWay の Room ライブラリはブラウザ上でのみ提供される RTCPeerConnection インターフェイスを内部で使用するため、サーバー側ビルド時に読み込むと以下のようなエラーが発生します。

'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

components/UserVideo.tsx

'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

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

'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 ライブラリをご利用いただけます。