Next.js (SSG), Remark, Firestore でブログを作りました

Next.js で新しいプロジェクトを試したいと思い、ブログを作ってみました。 業務でも Next.js を使っていますが、なかなか新しい機能などを試せないので素振り環境としても使っていくつもりです。

管理画面とユーザー側両方を1つの Git リポジトリで管理し、管理画面は Vercel, ユーザー側を Next.js の SSG + AWS (Cloudfront, S3) + Firestore で公開しています。

##ディレクトリ構造

Markdown のパース方法やスタイルを共通化したかったので1つのGit リポジトリにまとめました。 早くリリースしてブログを書ける体制が欲しかったので yarn workspace などによる monorepo 管理はしていませんが、後日試してみようと思います。

##Next.js の SSG

詳しい使い方は公式ドキュメントに記載がありますが、 getStaticPaths, getStaticProps を使うことで SSG できます。
開発中はどう使えばよいのだろう？と思ってましたが、普通に yarn run dev で動作しました。
ただし、 dynamic routing 使用時は getStaticPaths の指定が必要なのと、 Hot reload する度に getStaticPaths が走るので遅いという問題がありました。 コンテンツ増えてくると開発体験悪くなりそうなので、工夫が必要そうです。
また、リビルド・反映は GitHub actions で master push 時（またはローカルからデプロイコマンド実行時）にやっていますが、これも管理画面からできるようにする予定です。

##Remark

Markdown を良い感じにカスタマイズして使いたかったので Remark を選択しました。 割と癖があり、ほとんどのプラグインで型定義がなかったり、ビルドサイズが大きくなったりするので、後日まとめて記事にしようと思います。

##Firestore

DB が一番の悩みどころで、正直ただの .json を S3 に置くだけでも良いかなと思ったのですが、コメント機能を作りたかったので Firestore を使用しました。
Firestore の rules の Write をほぼ全て deny し、 Next.js の API Routes から firebase-admin を使って書き込み削除を行うことで面倒な rules の管理を減らしています。 コメント機能はまだ未実装なので詳細は実装したときに記事にします。

データストアとして Firestore を選定した理由としては