namachan10777.dev / blog / blog-on-nextjs

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

#tech

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

# Markdown処理

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

# ぬん

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

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