clover-iiifをNext.jsで使用する

概要

clover-iiifをNext.jsで使用するサンプルリポジトリを作成したので、備忘録です。

https://clover-iiif-demo.vercel.app/

背景

clover-iiifは以下のように説明されています。

https://github.com/samvera-labs/clover-iiif

Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.

（日本語訳）拡張可能な IIIF フロントエンドツールキットとマニフェストビューア。

これをNext.jsで使用します。

データ

「校異源氏物語（国立国会図書館所蔵）」をサンプルデータとして使用します。

https://dl.ndl.go.jp/pid/3437686

リポジトリ

以下で公開しています。

https://github.com/nakamura196/clover-iiif-demo

以下を参考にしました。

https://samvera-labs.github.io/clover-iiif/docs/composing

クライアントサイドでの実行にあたり、以下のような工夫が必要でした。

"use client";

import React, { Suspense } from "react";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";

// Viewerコンポーネントを動的にインポート（SSRを無効化）
const Viewer = dynamic(
  () => import("@samvera/clover-iiif/viewer"),
  { ssr: false }
);

const WorkContent = () => {
  const searchParams = useSearchParams();
  const manifestId = searchParams.get('manifest') || "https://dl.ndl.go.jp/api/iiif/3437686/manifest.json";

  return (
    <article>
      <Viewer iiifContent={manifestId} />
    </article>
  );
};

const Work = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <WorkContent />
    </Suspense>
  );
};

export default Work;

まとめ

不完全な点もあるかと思いますが、参考になりましたら幸いです。