JavaScript SDK
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 defineduse client を付与したファイルでも、プリレンダリング（サーバー実行）段階で行われるため、エラーを回避できません。
解決策
1. Next.js dynamic() で SSR 無効化
Next.js の next/dynamic を使い、特定コンポーネントのサーバーサイドレンダリング（SSR）をオフにします。そのコンポーネントは全てクライアントのみでレンダリングされるため、上述のエラーを回避することができます。
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 ライブラリをご利用いただけます。