技術書を紹介するサイトをNext.jsの静的書き出しで作った。エディタ風の画面と本のデータの持ち方
このサイト（My-deps）の作り方。Next.jsの静的書き出しとCloudflare Pagesの構成、本の書誌を自前で持つ理由、ISBN-13から紙の本のASINを計算する方法、本当に開閉できるタブとファイルツリー、つまずいたところを書いています。
開発
このサイトの作り方や、開発で実際に使っている技術・ツールについて、手を動かして確かめたことを書きます。
国立国会図書館サーチのAPIで本の書誌を確かめる。広告収入のあるサイトで使うときの条件も
国立国会図書館サーチのOpenSearch APIで、本の書名・著者・出版社・版・発売年月・ISBNを確かめる方法。リクエストの例、返ってくるXMLの読み方、アフィリエイトなど営利目的で使うときの利用条件とクレジット表示をまとめています。
next/font/googleでビルドが止まったので、JetBrains Monoを同梱してnext/font/localで読み込んだ
Next.jsのnext/font/googleでフォントの取得が止まり、ビルドが終わらなくなったときの対処。Google FontsのCSSからlatinサブセットの可変フォントを取り出して同梱し、OFLのライセンス文書と一緒にnext/font/localで読み込む手順です。
ISBN-13とISBN-10を相互に変換する。Amazonの紙の本のASINはISBN-10
本のISBN-13とISBN-10の関係と、チェックディジットの計算方法、相互に変換するJavaScriptのコードを紹介します。末尾がXになるISBN-10の扱いや、979で始まるISBNの注意点、Amazonのリンクに使うときのポイントも書いています。
静的サイトにエディタのようなタブを作る。sessionStorageとハイドレーションの扱い
Next.jsで静的に書き出したサイトに、開く・切り替える・閉じるが本当に使えるエディタ風のタブを作った方法。開いているタブをsessionStorageに保存し、ハイドレーションのずれを起こさずに復元する工夫を書いています。
details要素でファイルツリーを作る。開閉の状態をページ移動後も保つ方法
HTML標準のdetailsとsummaryでフォルダを開閉できるファイルツリーを作り、開閉の状態をsessionStorageに保存して、ページを移動しても保つ方法。今のページを含むフォルダを開いて見せる工夫と、残っている弱点も書いています。