Draft Modeを活用した画面プレビューの作成

2024年5月17日 11:33

こんにちは、エンジニアのカネコです。
本日は、Next.js(App Router)の新機能、Draft Modeを使って、microCMSのドラフトコンテンツを動的にプレビューする方法についてご紹介します。
この機能を活用することで、開発中のコンテンツをリアルタイムで確認しながら、公開後は高速に静的ページを提供することが可能になります。
この記事では、具体的な実装手順から、実際に開発する際の注意点まで詳しく解説します。

このシーケンス図は、Next.jsのDraft Modeを使用して、microCMSのドラフトコンテンツを動的にプレビューするプロセスを視覚化しています。

このシーケンス図は、各ステップがどのように連携してドラフトコンテンツのプレビューが実現されるかを示しています。これにより、開発者がプロセスを理解しやすくなり、実装をスムーズに行うことができます。
では実際にこのプロセスを実装していきます。

Draft Modeの基本

Next.js(App Router)のDraft Modeは、ページがヘッドレスCMSからデータを取得する際に特に有用です。
このモードは、ビルド時ではなくリクエスト時にページをレンダリングし、公開されていないドラフトコンテンツを取得します。
これにより、特定の条件下で動的レンダリングへと切り替わるため、開発者は公開前のコンテンツを確認することが容易になります。

実装ステップ

1.microCMSで画面プレビューの設定

microCMSで画面プレビューの設定を行うには、画面プレビューボタンをクリックした際の遷移先URLを指定する必要があります。
URLの中には、{CONTENT_ID}と{DRAFT_KEY}というプレースホルダーを含めてください。画面プレビューボタンを押下すると、{CONTENT_ID}は記事の個別IDであるコンテンツIDに、{DRAFT_KEY}は下書きキーであるdraftKeyに自動的に置換されて遷移します。この時、遷移先のエンドポイントは /api/draft に設定されている必要があります。これにより、設定されたURLは次の形式になります。

https://example.com/api/draft/?contentId={CONTENT_ID}&draftKey={DRAFT_KEY}

このURLをmicroCMSの設定画面に入力することで、画面プレビュー機能を有効化できます。次に、/api/draft エンドポイントの具体的な設定方法について詳しく見ていきましょう。

2. Draft Modeエンドポイントの設定

// app/api/draft/route.ts
import { Route } from 'next/app-router';
import { draftMode } from 'next/headers';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const contentId = searchParams.get('contentId');
  const draftKey = searchParams.get('drafKey');

　中略


  // Draft Modeを有効にし、draftKeyをCookieに設定する
  draftMode().enable();
  request.cookies.set('draftKey', draftKey, { path: '/', httpOnly: true });

  // ユーザーを詳細ページにリダイレクトする
  request.redirect(`/posts/${contentId}`);
});

まず、/app/api/draft/というエンドポイントを作成します。
このエンドポイントはDraft Modeを有効化する役割を持ち、ユーザーを具体的なコンテンツIDのページ、例えば/posts/${contentId}にリダイレクトします。
この段階で、適切なdraftKeyがCookieに設定され、後続のリクエストで利用されることになります。（今回はCookieを使用、Session等もいいかもしれません）

3. ドラフトコンテンツの取得

///app/posts/[id]/page.tsx
import { draftMode, cookies } from 'next/headers';
import { getListDetail } from '../../libs/microcms';  // microCMS API呼び出しを想定


export default async function Page({ params: { id }}: { params: { id: string };}) {
  const { isEnabled } = draftMode();
  const currentCookies = cookies();
  const draftKey = currentCookies.get('draftKey')?.value;


  let data;
  if (isEnabled && draftKey) {
    data = await getListDetail('posts', id, { draftKey });
  } else {
    data = await getListDetail('posts', id);
  }


  return (
    <article>
      <h1>{data.title}</h1>
      <div>{data.content}</div>
    </article>
  );
};

ユーザーが/posts/xxxxxにアクセスした際には、CookieからdraftKeyを取得し、microCMS APIを使用してドラフトコンテンツをフェッチします。
Draft Modeが有効であれば、ページはリクエストごとに動的にレンダリングされ、最新のドラフトデータが表示されます。
このプロセスは、開発中の変更を素早く確認するためのものであり、本番環境では静的に生成されたページが提供されるため、パフォーマンスが低下することはありません。

まとめ

この記事では、Next.js(App Router)のDraft Modeを活用して、microCMSのドラフトコンテンツを効率的にプレビューする方法を紹介しました。
この技術を利用すれば、開発プロセスがスムーズになり、リアルタイムでの内容確認が可能になります。
もっと良い方法をご存知の方は、ぜひコメントで教えてください。

✙

プラスジャムはWeb制作会社です。
ウェブサイト制作、システム開発、Webマーケティングなど、さまざまな課題解決やアイデアを具現化するWebソリューションを提案・提供しています。

noteでプラスジャムを見つけてくださった方は、お時間あればコーポレートサイトや他の記事もご覧いただければ幸いです。

＼コーポレートサイトはこちら／

＼関連記事はこちら／

プラスジャム制作開発部メンバーがWeb制作技術を紹介。案件で実装した機能や自己学習で得た知識を発信していきます。
［今回の記事担当］フロントエンドエンジニアカネコ 2022年入社。