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 で管理する
最後に
バッファの無い状態で進めますので、生暖かい目で見守って頂ければと思います。
途中で、色々要件が変わったら、ごめんなさい。