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

概要

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

インストール

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

npm i universalviewer

実装

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

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

components/pages/item/Viewer.tsx

'use client'

import { useEffect } from 'react'
import dynamic from 'next/dynamic'

interface ViewerProps {
  manifest: string
  cv?: number
  xywh?: string
}

// コンポーネントの実装
function ViewerComponent({ manifest, cv, xywh }: ViewerProps) {
  useEffect(() => {
    // universalviewerをインポートして初期化
    const { init } = require('universalviewer')
    require('universalviewer/dist/esm/index.css')

    init('uv', { manifest, canvasIndex: cv, xywh })
  }, [manifest, cv, xywh])

  return (
    <div id="uv" className="uv" style={{ width: '100%', height: '60vh' }}></div>
  )
}

// SSRを無効化し、クライアントサイドでのみレンダリングするコンポーネント
const Viewer = dynamic(() => Promise.resolve(ViewerComponent), {
  ssr: false,
  loading: () => (
    <div
      style={{
        width: '100%',
        height: '60vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#f0f0f0',
      }}
    >
      ビューワーを読み込み中...
    </div>
  ),
})

export default Viewer

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

まとめ

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