Overview

I created a sample repository for using clover-iiif with Next.js, so here are my notes.

clover-iiif-demo.vercel.app
clover-iiif-demo.vercel.app

Background

clover-iiif is described as follows.

GitHub - samvera-labs/clover-iiif: Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.
Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source. - samvera-labs/clover-iiif
GitHub

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

We will use this with Next.js.

Data

"Koui Genji Monogatari (held by the National Diet Library)" is used as sample data.

国立国会図書館デジタルコレクション
dl.ndl.go.jp

Repository

It is published at the following link.

GitHub - nakamura196/clover-iiif-demo
Contribute to nakamura196/clover-iiif-demo development by creating an account on GitHub.
GitHub

I referenced the following.

Getting Started – Clover IIIF
Showcase IIIF Manifests as interoperable web content.
Clover IIIF - Showcase IIIF Manifests as interoperable web content.

For client-side execution, the following workaround was necessary.

"use client";

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

// Dynamically import the Viewer component (disable 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;

Summary

There may be some incomplete aspects, but I hope this serves as a helpful reference.