ドラフトモード

Draft Mode

このページはCMSにAPIベースの microCMS を利用して On-demand ISR で Static Rendering されています。
このようなケースで公開前のコンテンツのプレビューを行う際{DRAFT_KEY}をsearchParamsとして渡す実装を行うと、対象のページは Dynamic Rendering となってしまうため、ここでは Next.js の Draft Mode を利用します。

API Routes

microCMS では各APIにプレビューの設定を行うことができるので、この遷移作に API Routes のエンドポイントを指定して{CONTENT_ID}や{DRAFT_KEY}等必要な値をパラメータとして渡しつつdraftModeを有効にします。

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  draftMode().enable()
}

page.tsxでは以下のようにdraftModeが有効かどうかを判定することが出来ます。

import { draftMode } from 'next/headers'

export default async function Page({ params }: { params: { id: string } }) {
  const { isEnabled } = draftMode()
}

これにより ISR のキャッシュをバイパスし、公開前のコンテンツのプレビューが可能になります。

また、通常ブラウザを閉じる事で Draft Mode のセッションは終了しますがdraftMode().disable()を実行する事で、意図的に終了する事が出来ます。

閲覧中のページで Draft Mode が有効になっていることをユーザーへフィードバックする意味でも、プレビュー中のみ表示される Draft Mode から抜けるUIがあると、より扱いやすくなります。