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.

<L/a<<LySC/aocos}<<Cyurnx}p/dootit=m>東pinu>pa{y京>vttti{:大a>n学cise5「lnrr,総aec合sr=図s>"書Nh館atバmtーepチ=sャ":ルj/ミp/ュsjー"pジsアdeムaa」trをac改-h変l.しagてno作g.成=jし"pてj/いaaま"sすs。deattsa/-jcsu/rw=p{.dbautnad}l>e<./jdsi"v>></Script>

Summary

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