NOTE 064 / 2020年
一覧と個別を同じデータから作る
静的な読み物サイトを、データと画面に分けて作る考え方です。
読み物サイトでは、記事の一覧、個別の記事、タグや著者のページが組み合わさります。Next.js の静的生成を使うと、それぞれのページをビルド時に作り、配信ではファイルを返すだけにできます。
記事のデータは、画面のコードと分けて管理します。同じデータから一覧と個別ページを作るようにすると、更新のときに一箇所だけ直せば済みます。
押さえたい点
- 01一覧と個別を同じデータから作る
- 02記事データを画面から分ける
- 03配信時はファイルを返す構成にする
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- Google Apps Script 外部サイトdevelopers.google.com
- Apps Script とスプレッドシート 外部サイトdevelopers.google.com
- GitHub Actions 外部サイトdocs.github.com
- AWS ドキュメント 外部サイトdocs.aws.amazon.com
- Amazon S3 ガイド 外部サイトdocs.aws.amazon.com
- Amazon CloudFront ガイド 外部サイトdocs.aws.amazon.com