概要

ジャパンサーチでは、ジャパンサーチ内で使われている画面の構成要素を、部品としてジャパンサーチ以外のウェブサイトでも利用できる機能であるウェブパーツを提供しています。

https://jpsearch.go.jp/static/developer/webparts/ja.html

今回、Next.jsで本機能を使用する機会がありましたので、その備忘録です。

使用例

以下のページでご確認いただけます。

https://jps-2023-next.vercel.app/jps

ソースコード

以下で公開しています。

https://github.com/nakamura196/jps_2023_next

以下のように、Scriptタグを使ってjsファイルを読み込むことで、うまく表示させることができました。

    <Layout>
      <Script src="https://jpsearch.go.jp/assets/js/wp.bundle.js"></Script>
      <Container
        sx={{
          my: 5,
        }}
      >
        <p>
          東京大学「総合図書館バーチャルミュージアム」を改変して作成しています。
        </p>
        <div className="jps" data-lang="ja" data-cur={data}></div>
      </Container>
    </Layout>

まとめ

ジャパンサーチのウェブパーツを同様の環境でお使いになられる際の参考になりましたら幸いです。