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.

ウェブパーツ

jpsearch.go.jp

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.

jps-2023-next.vercel.app

jps-2023-next.vercel.app

Source Code

It is published at the following URL.

GitHub - nakamura196/jps_2023_next

Contribute to nakamura196/jps_2023_next development by creating an account on GitHub.

GitHub

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.