---
title: Payload CMSのライブプレビューの実装でつまづいたこと
url: https://roboin.io/article/2025/07/15/common-pitfalls-when-implementing-live-preview-in-payload-cms/
description: Payload
  CMSは、標準でライブプレビュー機能をサポートしています。ところが、ドキュメントにしたがって実装したにもかかわらず、ライブプレビューが機能しないという問題に遭遇しました。
publishedDate: 2025-07-15T03:22:17.520Z
modifiedDate: 2025-07-15T03:22:17.520Z
thumbnail: https://roboin.io/api/media/file/payload-cms-official-website.png
thumbnailAlt: Payload CMSの公式Webサイトのスクリーンショット
thumbnailCaption: 画像：[Payload CMSの公式サイト](https://payloadcms.com/)
---

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

Payload CMSは、標準で[ライブプレビュー機能](https://payloadcms.com/docs/live-preview/overview)をサポートしています。

[公式ドキュメント](https://payloadcms.com/docs/live-preview/server)ではライブプレビュー機能を実装する方法について、詳しく解説されています。

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

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

## 原因

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

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

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

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

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

```typescript
const article = await payload.findByID({
    // ...
    draft: true
});
```

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

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

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