Works
制作実績
- サイトURL
- https://wagou.vercel.app/
- 担当範囲
- コーディング、Next.js、microCMS
- 制作期間
- 100時間
- サイト概要
-
Basic認証
ユーザー名 ：wagou
パスワード ：nextsample
ページ数 ：7P
Next.jsで制作したコーポレートサイトです。
支給されたデザインをもとに、Next.jsでの実装、microCMS連携、フォーム連携、Vercelへのデプロイを担当しました。
▼レンダリング設計
ページの更新頻度と運用方法に合わせて、ISR・SSG・動的レンダリングを使い分けました。
TOP・ニュース関連ページ：ISR + オンデマンドISR
記事の更新を速やかに反映しながら、microCMSへの不要なAPIリクエストを抑えることを目指しました。
・microCMSのWebhookを受けて、TOPとニュース配下のキャッシュを無効化し、次回アクセス時に再生成する構成にしました。 記事詳細だけでなく、一覧・カテゴリ・ページネーションも再検証の対象にしています。
・Webhookによる再検証が行われなかった場合の保険として、revalidate = 3600を設定しました。 1時間経過後のアクセスをトリガーに、バックグラウンドで再生成します。
・通常の更新反映はWebhookを起点にすることで、時間経過型ISRの間隔を短くすることに頼らない設計にしました。
・Webhookの受信時には秘密トークンを検証し、不正な再検証リクエストを拒否しています。
会社紹介・フォームページ：SSG
更新頻度が低いページはビルド時に静的生成し、アクセスごとのページ生成を不要にしました。
下書きプレビュー：動的レンダリング
編集者が公開前に記事の表示を確認できるよう、microCMSの下書きプレビューに対応しました。
contentIdとdraftKeyを使って下書きを取得し、公開ページと共通の記事コンポーネントで表示しています。
▼API連携
microCMSへのアクセスをsrc/lib/microcms.tsに集約し、ページコンポーネントからデータ取得の実装を切り離しました。
複数のページで取得処理を共通化し、変更時の修正箇所をまとめています。
用途に応じた取得処理の共通化
記事詳細・静的パス生成・一覧表示に対応するgetPostDetail・getAllPost・getPostListを用意しました。
一覧取得ではページ番号からoffsetを算出する処理を共通化し、カテゴリの絞り込みや並び順は呼び出し側で指定できるようにしています。
記事が存在しない場合の処理
詳細取得で404が返った場合はnullを返し、ページ側で記事が存在しない場合の表示を判断できるようにしました。
それ以外のエラーは再スローし、404と区別しています。
取得条件とレスポンスの型定義
microCMSの取得条件と、取得する記事・カテゴリのデータ構造に型を付けました。
指定する値や項目名の間違いに開発中に気づけるようにしました。
▼フォーム連携
お問い合わせの受付・通知メール送信にSSGFormを採用しました。
静的生成したフォームページから外部サービスへ送信できるため、フォーム専用のバックエンドやメール送信基盤を自前で構築・運用する負担を抑えられると考えました。