2022年12月05日

Next.jsでAgora Web UIKitを利用する方法

using-the-agora-web-uikit-with-next-js

※この投稿は、Agoraの日本総代理店であるブイキューブが、Agoraブログを翻訳した記事です。

 

この記事では、 Next.js Webアプリで Agora Web UIKitを使用する方法について説明します。

サーバー側レンダリング (SSR) または静的サイト生成 (SSG)を使用する場合、動的インポートを使用して、Next.jsにAgora SDKを(“window is not defined”エラーが発生することなく) インポートします。

ガイドブックダウンロード  【大充実】通話・配信SDK「Agora」ガイドブック  通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。 Agora SDKの特徴から活用例まで徹底解説! 無料ダウンロード

Reactのサンプルを使ってみましょう

create-next-appから作成したNext.jsアプリにAgora Web UIKitリポジトリReactサンプルコンポーネントをインポートしようとすると、次のようにエラーが発生します。

 

build-a-video-chat-app-1

コール スタックを見ると、エラーがAgoraSDKによってスローされていることがわかります。

何故このエラーが発生するのか?

Next.jsはSSRとSSGを使用します。 Agoraのライブラリが (直接、または、Agora Web UIKit によって) インポートされると、ブラウザーで使用可能なWindowオブジェクトにアクセスします。Next.js は、サーバー上でWebページを事前にレンダリングするか (SSG)、リクエストごとにWebページをレンダリングします (SSR)。これにより、サーバー上でウィンドウ オブジェクトにアクセスできないため、エラーが発生します。したがって、“window is not defined”エラーが発生します。

修正方法

修正は非常に簡単です。ブラウザでページがレンダリングされるときだけ、Agora Web UIKitをインポートさせます。windowオブジェクトの条件付きチェックを使用してソリューションを回避することもできますが、Next.jsはSSRを使用しない動的インポートを提供しています。

 

dynamic()関数呼び出しを使用してVideocallのインポートを置き換えることができるようになりました。最初の引数は、ファイルからコンポーネントをインポートするだけの関数を受け取ります。2番目の引数は、このモジュールをサーバー側に含めたくないためssrをfalse としてマークしたオブジェクトを受け入れます。

 

VideocallコンポーネントでAgoraのAPP IDを設定するとすぐに、サンプルが機能するようになります。そして、Next.js Webアプリにビデオ通話機能が追加できました。

結論

Next.js Web UIKit プロジェクトのサンプルは、こちらで確認できます。さらに深く掘り下げたい場合は、例を詳しく説明しているこのブログ投稿をご参照ください。

又、AndroidiOSReact Native、およびFlutterでも利用できるUIKit があります。そちらもチェックできます。

ガイドブックダウンロード  【大充実】通話・配信SDK「Agora」ガイドブック  通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。 Agora SDKの特徴から活用例まで徹底解説! 無料ダウンロード
ブイキューブ

執筆者ブイキューブ

Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。

関連記事

先頭へ戻る