📝
漫画「ブラックジャックによろしく」のファンサイトを作った
作成したサイト
前提
- 「ブラックジャックによろしく」は二次利用可能
- 0円で運用する
- 管理面を作成したくないのでCMSを利用する
機能
- 漫画の試し読み機能
- NEWS機能
実装の概要
構成するサービス
| サービス名 | 用途 |
|---|---|
| vercel | Webホスティング |
| contentful | API |
使用する技術
- Next.js(app router)
- Reactを使いたい人向けのフレームワーク
- TanStack Query
- 何度もuseEffectしなくて良いようにキャッシュを管理してくれるライブラリ
- ChakraUI
- ボタンやアコーディオンなど、よく使うUIを提供してくれるコンポーネント集
どのようにやっていくか
作業の流れ
- デザイン作成
- 開発環境の構築
- contentfulのアカウントを作る
- next.jsをインストールしたリポジトリをvercelにデプロイ
- vercel上で、開発環境と本番環境にgitのbranchをそれぞれ割り当てる
- 例）mainBranch -> 開発環境、releaseBranch -> 本番環境
- 本番環境用のドメインを取得して、vercelに設定する
- モデルを設計する
- 上記のモデルをcontentfulの「Content model」に設定する
- ページを実装する
- リリース
- contentfulの「Content」に記事を入稿する
想定される問題
配信するページの更新頻度は60秒間隔にする
背景
- contentful側で記事を更新しても、ページが更新されないことがある
- 例） トップページのヒーロー画像をcontentful上で変更したが、ユーザーに見えている画像が変わらない
- 原因は、キャッシュした古いページを配信していること
- コンテンツの更新頻度は高くないが、入稿ミスを修正する場合を想定して60秒ごとに再検証するようにする
実装方法
- 各ページのファイルの先頭で再検証の時間を宣言する
- Vercelの解説を参考にする
Discussion