Next.js(App Router) + microCMSで構築したWebメディアの技術紹介

こんにちは、株式会社アルファドライブの佐藤です。この記事は AlphaDrive Advent Calendar 2023 4日目のエントリです。

本日は、Next.js(App Router) + microCMSで構築したWebメディアの技術スタックや開発チームの運用フローを紹介します。

開発したメディア

  • ビジネスマガジン『Ambitions』のWeb版。

ambitions-web.com

  • 多くの方に楽しんでいただけるよう、無料で全文読める形でお届けしています。 *1

主な技術スタック

  • microCMS
    • 特に日本において市場をリードするヘッドレスCMS。ブログのコンテンツ管理を担う
  • Vercel
    • フロントエンド開発向けのプラットフォーム。サイト公開におけるインフラやCI/CDを担う
  • Next.js (13.5) (App Router)
    • フロントエンドフレームワーク
  • Tailwind CSS
    • CSSフレームワーク
  • Zod
    • TypeScriptファーストの型宣言、検証ライブラリ
  • Chromatic
    • StorybookのUI差分検知

特徴として、Next.jsのApp Routerを使用しています。これにより、後述するようなVercelと連携した便利なデプロイ、データキャッシュによるページ表示速度の向上が実現されています。

デプロイフロー

VercelにGitHubリポジトリを連携することで、自動で以下のようなデプロイフローが構築されます。

  • PRに変更をpush → プレビュー環境デプロイ
  • mainブランチにマージ → 本番環境デプロイ🎉

mainブランチを保護するための設定

mainブランチにマージしただけで自動で本番環境にデプロイされてしまうので、mainブランチを保護するために以下のようなマージ条件を設定しています。

  • mainブランチの最新コードを取りこんでいること

    • PRのページからmainブランチの取り込みが簡単にできるように「Always suggest updating pull request branches」を有効にしています。
  • 静的解析やテストのCIが正常に完了していること

マージに必要なチェック項目の設定

Next.jsによるWebページの生成(On-demand Revalidation)

  • ここからは、開発者によるソースコードの変更や編集者による記事の更新が、どのようにWebページに反映されるかを紹介します。
  • コンテンツ更新のタイミングでサイトの必要なページを再生成する、On-demand Revalidationと呼ばれる機能を使用しています。

ビルド時

  • PRがmainブランチにマージされアプリがビルドされると、fetch関数によるリクエストの結果や各ルートの静的レンダリング結果がサーバーにキャッシュされます。
    • これにより、microCMSへのリクエスト数の削減やレスポンスタイムの向上が実現します。

記事公開時

  • 編集者が記事を公開したりコンテンツを更新すると、microCMSからNext.jsのAPIエンドポイントに向けてWebhook通知を行います。
  • webhook通知を受け取ると、更新されたデータを再検証する処理が動きます。
    • Webhook通知には更新されたコンテンツの情報が含まれており、そのコンテンツに関するデータのみをキャッシュをPURGE(削除)します。
    • キャッシュが削除された状態でユーザーがページに訪れると、新しいデータがmicroCMSから取得・キャッシュされます。それ以降のユーザーには、新しくキャッシュされたデータが表示されます。

fetch関数とrevalidateTag関数によるキャッシュ操作(Next.jsのドキュメントより引用)

まとめ

Next.js(App Router) + microCMSの組み合わせで、開発開始から約三ヶ月でハイパフォーマンスなメディアをリリースすることができました。microCMSやNext.jsを使用した開発の参考になれば幸いです!

*1:2023年12月現在。スマホ向けデザインのみとなっており、PC版デザインは製作中です。

Page top