個人サイトをNext.jsで書き直した

2021年9月21日

今まではRustを使った自作静的サイトジェネレータを使っていたが、どうにも設計が行き詰まっていたので根本から作り直した。多少使った覚えがある事、Vercel でまるっと面倒を見てくれることから Next.js 選んだがわりといい感じだ。サーバを立てればリアルタイムにPreviewが見られる（今使っているHatenablogはCORS関連でプレビューが使えない……）し、JSXでad-hocに書けるので便利。反面記事と実装の完全な分離は難しくなったが、まぁ私しか書かないしいいでしょ。また政治的理由からAMP対応をやめたが、余分なJSが付いてくるのが気になるところではある。

Markdown処理

Markdownはremark でgetStaticProps の中で処理している。 Loaderを自作しようかと思ったが Loaderを切り出さずに作るのはちょっと面倒そうだったし、 SSRするなら性能上問題が出るがSSGだから別に良いだろうということでtext-loader で文字列として読み込んでビルド時にパースする事にした。

SSGなので高速だし<Link> を使って遷移するのでSPAの速度感が出る。ここまで殆ど何もせずに作れるのだからNext.jsはすごい。

ある程度Markdownを処理できるようにはしたがシンタックスハイライトの対応はまだだし、 headingのレベルを見て<section> でうまくまとめるような処理も入れてない。そのうち対応したい。

Syntaxhighlight

react-refractor を使用した。楽〜。以下のような感じでシンタックスハイライトが出来る。テーマは後で自分好みに変えようと思う。あと行番号表示も実装したい。

console.log('Hello World!');

OGP

OGPも対応させた。元々はNext.jsで使える/pages/api でnode-canvas を使って画像を生成するつもりだったが、日本語描画用に入れたNoto Sans CJKjp が15 MB、node_modules が40 MBくらいで VercelのLambda Functionの上限値50 MBを突破しデプロイ出来なかった。厳しい〜と思いながら代替案を探しているとVercel謹製のog-image というアプリケーションがあったのでこれをForkし、日本語対応と画像差し替えをad-hocにやってデプロイすることでなんとなかった。ちなみにここです。 URIエンコーディングされたファイル名を投げると画像が返ってくる。追加のアイコンを作るクエリパラメータもあったがこれはad-hocな実装なので無効になった。今思うと使いたい場面もあるかもしれないので後で修正したい。

これはヘッドレスChromiumでスクリーンショットを取ることで画像を生成しているらしい。 Lambda Functionの実行環境にChromiumが入っているのは驚きだ。マジか。

CSS

いつもどおりTailwind.css です。大分慣れてきてドキュメントを引かなくてもわりと書けるようになってきた。ここ最近ReactとTailwindでしか書いてないので普通のCSSの書き方を忘却してきている。

そう言えばChakra UI というのもあり、こちらはReactべったりのライブラリだがモノとしてはTailwindっぽいユーティリティ志向らしい。コンポーネントもある程度あるらしく便利かもしれない。次改修するときがあったら使いたい。というかこれドキュメントの検索UIがTailwindそっくりすぎない？これ最近流行ってるんですかね。

一応読めるようにはなったがマジで適当なCSSなのでもう少しなんとかしたい。みそは入ってませんけどのUI が結構好きなのであんな感じにレスポンシブにしたい。ちなみに前のバージョンがRustで書かれていたのはここのブログがRust製の静的サイトジェネレータを使っているからです。

履歴とサイトマップ

nodejsで作ったスクリプトでビルド前に./lib/generated/metadata とpublic/sitemap.xml に自動生成。 git log の--pretty オプションと--date オプションを使えば好きな形に整形できるのでプログラムからも扱いやすい。ついでに記事は./article/blog か./article/diary 以下に作成されれば自動で追加されるようになっている。事前にビルドスクリプトを走らせなくてもNextJSのGetStaticProps とかでfs.reafFileSync を呼んでファイルをパースすれば良いのかもということに今気が付いたが面倒なのでまた今度検証することにする。

ぬん

機能的にはタグ画面がまだだし、設計がかなり適当になされており記事を増やすことを考慮されていないなどがある。後者はパパッと治すにしてもタグ画面はほしいところだ。あと将来的にはよくあるブログのようにタイトルだけではなく本文のPreviewまで見えるような記事一覧のUI がほしい。ページネーションなら難しくはない気がするが、静的にパスを列挙するのは面倒くさそうだ。シンタックスハイライトと併せてこれはすこし実装を考える必要がある。

とにかく物は出来たし保守性も悪く無さそうなので今後はHatenablogよりこちらで書いていきたい。