Next.jsでUniversal Viewerのnpmパッケージを使用する

概要

Next.jsでUniversal Viewerのnpmパッケージを使用する方法の備忘録です。

インストール

以下でインストールします。

実装

useEffectを使うため、クライアントコンポーネントとして実装する必要があるようでした。

またdivタグにuvクラスを与えることで、cssが当たるようになりました。

他にも使用可能なオプションがあるかと思いますが、cvで処理ロードするcanvasのインデックス、xywhで表示する矩形を指定することができました。

まとめ

Universal Viewerの利用にあたり、参考になりましたら幸いです。