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

個人サイトをNext.jsで作り直した

今までは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よりこちらで書いていきたい。