「textlint と Next.js で始める静的サイトの校正支援」を試してみるために、今回は以下のような構成でサイトを作成しています。
概要図
今回は「CMS には microCMS」「デプロイ先には Vercel」を利用しています。
処理フロー
- ユーザーが microCMS のエディターでページを編集し、必要に応じてプレビュー開始要求を出す
- API route は要求を受け取ったらプレビューモードを開始し、該当ページへリダイレクトする
- 該当ページでは
getStaticPropsがプレビューモードで実行され、プレビュー用の Contents を取得し動的にページを生成する - ページを動的に生成するとき、textlint で HTML 本文をチェックし結果をプレビュ－ページとして合成する
- すべての処理が完了したら結果を送信する
- ブラウザー側ではプレビューページを表示するときに、Notification Component を使ってメッセージ(エラー)リスト等を通知する