Overview

Japan Search provides Web Parts, a feature that allows UI components used within Japan Search to be used as parts on websites outside of Japan Search.

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

I had the opportunity to use this feature with Next.js, so here are my notes.

Usage Example

You can see it on the following page.

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

Source Code

It is published at the following URL.

https://github.com/nakamura196/jps_2023_next

By loading the JS file using the Script tag as shown below, I was able to display it successfully.

    <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>

Summary

I hope this serves as a useful reference when using Japan Search Web Parts in a similar environment.