makenowjust-labs/blog

Pagefindとは静的サイトで動作する (バックエンドのサーバーを必要としない) 全文検索エンジンです。

このブログにPagefindによる全文検索機能を導入しました。 右上の虫眼鏡ボタンをクリックすると、検索用のダイアログが開くはずです。

この記事では、どのようにしてNext.js製のサイトにPagefindを導入したのかを説明します。

このブログは現在 (2023年12月11日付) Next.jsで実装されています (移行の際の記事)。

これまでは実装にPages Routerを使っていました。 最近「カテゴリ機能」(現在は「タグ機能」) を追加したのですが、その際にカテゴリの一覧の取得をすべてのページのgetStaticPropsで行わなければならず、不便に感じていました。 そうした問題の解消のために、App Routerへと移行しました。

他にもOGP画像の生成にsatoriを使うようにしたり、GitHub PagesへのデプロイをGitHub Actionsで成果物をアップロードする形にしたり、色々と修正をしました。 それらの実装を通じて学んだことを、この記事では整理します。

commlogはこれまでNuxt 2を利用してきました。 しかし、Nuxtは2022年11月にNuxt 3がリリースされており、Nuxt 2はVue 2と共に2023年12月末をもってサポートが終了されることが発表されていました。 commlogの大部分のコードを書いたのは5年以上前になっているということもあり、コードをメンテナンスすることが困難になっていました。

そこで今回、commlogを完全に書き直すことでNuxt 3に移行しました。 その記録を、この記事では報告します。 また、Nuxt 3の他にTailwind CSSやMock Service Worker (msw)、Bun、Netlify Buildなどの、様々なライブラリ・開発ツールを利用して開発を進めました。 これらにより、モダンな構成にできたのではないかと考えています。

前々から課題として感じていた、このブログの OGP 画像の自動生成を実装しました。 OGP 画像は Twitter などの SNS にシェアするときに表示される画像です。

この記事では自動生成の実装や、skia-canvas や budoux といったライブラリを利用して、タイトルの自動改行や高速な生成を実現したので、それらについても解説します。

元々は GatsbyJS で作られていたこのブログを、Next.js で書き直して復活させました。 放置している間にもいくつか記事にしたい事柄があったのですが、元の仕組みでは記事を書く気が起きず、結果的に 1 年近く放置することになってしまいました。

この記事では「なぜ GatsbyJS から移行したのか」と「他のフレームワークを比較した結果」、そして「最終的な技術スタック」について説明します。