Next.jsで０からブログ作成 Advent Calendar 2022 の１日目の記事です。
本記事をご覧いただき、ありがとうございます。
Advent Calendarで、２５回に分けてNext.jsブログを作成する企画の初回になります。
今回は、そもそものきっかけや、要件の整理、サービスの選定について書きます。

きっかけ

過去にWordPressでブログを運用していた経験がありましたが、
表示の遅さ、セキュリティリスクとイタチごっこになるアップデートの煩わしさに疲れて
静的サイトジェネレーターのHugoに乗り換えて運用を開始しました。

サイトの表示速度も爆速で満足していたのですが、記事が増えてくると別の問題が浮き彫りになりました。
そう、ビルドに時間掛かりすぎる問題です。
差分ビルドはできないか、Headless CMSを使ってはどうか、色々検討しましたが、
有効な解決策は見つかりませんでした。

そんな時、Next.jsのISR(Incremental Static Regeneration)の機能に注目しました。
ざっくり言うと、一定時間ごとにデータの再取得を行い、再生成する仕組みのことです。

ただし、問題もありました。
一定期間ごとに再生成するため、アクセスが無い場合でも、内部的に再生成が走ります。
乗り換え先として考えていたサービスでも、リクエスト数、データ転送量で課金される事が多く、
費用面で二の足を踏んでいました。

しかし、Next.js 12.1でリリースされたOn-demand ISRで状況は変わりました。
任意のタイミングでISRを実行することができるようになったのです。
Next.js 12.2 で安定板に変わり、これを使おうと確信したのでした。

Advent Calendar の勢いで、ブログを作り直したいと思います。

ユーザー要件（私ですが。。。）

On-demand ISRを利用する
費用は最小限
なるべく自作したい
商用利用可（広告貼る程度）
記事の更新などは、手間が少ない方が良い
（夢）月間５０万PVでも大丈夫

サービス選定

On-demand ISRを実現するサービスとして Vercel が有力候補になるかと思いますが、商用利用はできません。
色々と検討した結果、ある程度自由に構築できるAWSを選択しました。
AWSのどのサービスを利用するかは、料金で検討することにしました。
見積りは以下の通りです。

先日、Next.js 13 に対応した AWS Amplify か Amazon Lightsail のどちらかが
候補に上がりましたが、転送量の無料枠１TB は大きいと思い、Lightsail を選択しました。

記事の管理

記事の管理は大きく２点あると考えます。

テキストファイル（マークダウンファイル）
データベース（Headless CMSなど）

今回は、DynamoDB を選択しました。
DynamoDB StreamをトリガーにしてLambdaを実行する事でOn-demand ISRを
発火させることができるのではと考えたためです。
画像は S3 に格納することにします。

機能要件

以下の機能を実装するように考えています。

記事一覧
記事詳細
カテゴリー機能
タグ機能
ページネーション
サイトマップ（ISRでどう実装するか悩んでいます）
SEO関連設定（OGPなど）
Qiitaの投稿記事も記事一覧に表示させたい（できれば）
Twitterと連携させたい（公開通知など）
On-demand ISR
国際化対応（余裕があれば）
and more ...

補足事項

next/image を利用したいのでAmazon CloudFrontの利用は諦めた
next/image を諦めて自前で画像を最適化しようと考えたが、CloudFront と Lightsail の
最低インスタンスの無料データ通信枠が 1TB で同じだったため
DynamoDB に記事を登録する仕組みを実装しなければならない
お問合せフォームはSNSアカウントのリンクを貼るので機能から落とした
TypeScriptで実装する
tailwind css でデザインする
独自ドメイン運用（Route53管理）
ソースコードはCodeCommit で管理する

最後に

バッファの無い状態で進めますので、生暖かい目で見守って頂ければと思います。
途中で、色々要件が変わったら、ごめんなさい。