Payload CMSのライブプレビューの実装でつまづいたこと

Payload CMSは、標準でライブプレビュー機能をサポートしています。

公式ドキュメントではライブプレビュー機能を実装する方法について、詳しく解説されています。

ところが、ドキュメントにしたがって実装したにもかかわらず、ライブプレビューが機能しないという問題に遭遇しました。

詳しく調査したところ、プレビューの表示自体はできているのですが、記事を編集してもプレビューが再読み込みされず、変更が反映されていないということが判明しました。

原因

この問題は、いくつかの原因がありました。

ドラフトの記事データを読み込んでいない

ライブプレビューに対応するには、ドラフトの記事データを読み込む必要があります。

ドラフトの記事データを読み込むようにしないと、変更を公開するまでプレビューに反映されず、プレビューの意味がなくなってしまいます。

ドラフトの記事データを読み込むには、オプションでdraft: trueを指定します。

1
const article = await payload.findByID({
2
    // ...
3
    draft: true
4
});

環境変数がクライアントに公開されていない

Payload CMSのドキュメントのRefreshRouteOnSave.tsxの定義では、"use client"ディレクティブが書かれています。

つまり、このコンポーネントはクライアントコンポーネントということになります。

Next.jsでは、デフォルトではクライアントから環境変数にアクセスできません。

そのため、@payloadcms/live-preview-reactのRefreshRouteOnSaveコンポーネントのserverURLに渡す環境変数の名前には、NEXT_PUBLIC_プレフィックスが必要です。

serverURLの値の末尾にスラッシュが入っている

@payloadcms/live-preview-reactのRefreshRouteOnSaveコンポーネントのserverURLに渡す値は、末尾のスラッシュが許可されていません。

末尾のスラッシュがあってもエラーにはなりませんが、自動再読み込みが機能しなくなります。

serverURLの値は、payload.config.tsのserverURLと同様に、プロトコル、ドメイン、ポートのみが許可され、パスは許可されません。

その他

Next.jsのルートキャッシュやデータキャッシュを利用している場合、ライブプレビュー用のページではこれらを無効化する必要があります。

（私の場合は適切に無効化していましたが、ライブプレビューの実装時に忘れる人が多そうなので一応書いておきます）