【ITニュース解説】【Nuxt3（SSG） + microCMS】プレビュー機能の実装

現代のWebサイト開発では、ヘッドレスCMSと静的サイトジェネレーター（SSG）を組み合わせる手法が広く採用されている。この構成は、Webサイトの表示速度を高速化し、セキュリティを向上させるという大きな利点を持つ。しかし、従来のCMSが当たり前に提供していた「プレビュー機能」をそのまま利用できないという課題も存在する。ここでは、日本製のヘッドレスCMSであるmicroCMSと、人気フレームワークNuxt.jsのバージョン3を使い、SSGで構築されたサイトにプレビュー機能を実装する仕組みを解説する。

まず、ヘッドレスCMSとSSGの基本的な関係性を理解する必要がある。WordPressに代表される従来のCMSは、コンテンツを管理する管理画面（バックエンド）と、コンテンツを表示するWebサイト（フロントエンド）が一体化していた。これに対し、ヘッドレスCMSはコンテンツ管理機能のみを提供し、フロントエンドは持たない。コンテンツはAPIと呼ばれる仕組みを通じて外部に提供され、開発者はNuxt.jsなどの好きな技術で自由にフロントエンドを構築できる。この分離により、柔軟な開発が可能となる。一方、SSGはWebサイトのページを事前に生成しておく技術だ。ユーザーがアクセスするたびにページを生成するのではなく、あらかじめ完成したHTMLファイルを用意しておくため、非常に高速な表示が実現できる。

この二つを組み合わせると、コンテンツ管理はmicroCMSで行い、Nuxt.jsがそのコンテンツを取得してビルド時に静的なHTMLサイトを生成するという流れになる。この時、問題となるのがプレビューだ。microCMSで記事を下書き保存しても、その内容はまだAPIで公開されていない。また、たとえ下書きデータを取得できたとしても、SSGサイトはすでにビルドが完了しているため、下書きの変更は即座には反映されない。この問題を解決するのが、microCMSが提供するプレビュー機能の仕組みである。

microCMSのプレビュー機能は、特定のURLに下書き記事の情報を含んだパラメータを付けてアクセスさせることで実現される。具体的には、microCMSの管理画面でプレビューボタンを押すと、あらかじめ設定しておいたフロントエンドのプレビュー用URLに、「どの記事の下書きか」を示すcontentIdと、「下書きであることの証明」となるdraftKeyという二つの情報がクエリパラメータとして付与されて遷移する。Nuxt.js側では、このリクエストを受け取り、パラメータを解読して下書きデータを表示する特別な処理を実装する。

具体的な実装手順は次のようになる。まず、Nuxt.jsプロジェクトにプレビューリクエストを受け取るための専用ページ、例えばpages/preview.vueを作成する。このページは、URLに含まれるcontentIdとdraftKeyを読み取る役割を担う。次に、これらの情報を使ってmicroCMSのAPIに下書きデータをリクエストする。microCMSのクライアントライブラリには、draftKeyを指定して下書きコンテンツを取得する機能が用意されている。このdraftKeyを付けてAPIを叩くことで、通常は取得できない下書き状態のデータを取得することが可能になる。

無事に下書きデータを取得できたら、次はそのデータを本来の記事ページで表示させる必要がある。しかし、プレビュー用のページはあくまでデータ取得のための中継地点であり、ここで記事の内容を表示するのは望ましくない。そこで、取得した下書きデータを保持したまま、本来の記事詳細ページ（例：/blog/記事ID）へリダイレクト（自動的にページを遷移）させる処理を行う。このとき、取得した下書きデータをどのようにしてリダイレクト先のページに渡すかが重要になる。この課題に対し、Nuxt.jsが提供するuseStateという機能が役立つ。useStateを使うことで、アプリケーション全体で共有できる状態を作成できるため、プレビューページで取得した下書きデータをここに保存し、リダイレクト先の記事詳細ページでそのデータを読み出して表示することができる。

記事詳細ページ側では、通常は公開済みのデータをAPIから取得して表示するロジックが組まれているが、プレビュー経由でアクセスされた場合のみ、useStateに保存された下書きデータを優先的に表示するよう条件分岐を追加する。これにより、同じURLのページでも、通常アクセス時は公開記事が、プレビュー時は下書き記事が表示されるという出し分けが実現できる。最後に、プレビューのためだけの中継ページ（pages/preview.vue）は、最終的に公開する静的サイトには不要なため、SSGのビルド対象から除外する設定を行う。これにより、本番環境に余計なファイルが含まれるのを防ぐことができる。

このように、ヘッドレスCMSとSSGの組み合わせにおけるプレビュー機能は、CMS側とフロントエンド側が連携し、動的なデータ取得と静的なページ生成の仕組みをうまく組み合わせることで実現される。この実装により、コンテンツ編集者は公開前に記事の見た目を確認できるため、安心してコンテンツを作成・更新できるようになり、開発の効率とサイト運用の品質を両立させることが可能となる。