公式パッケージ · フレームワーク

Payload CMS のライブコンテンツ

Payload 3 のプラグイン。編集者が公開・更新・削除するとイベントを送り、Next.js 用の <LiveRefresh> がコンテンツの変更に合わせてページのサーバーコンポーネントを更新します。ページは静的・キャッシュのままで、Vercel でも動きます。

@hibira-io/payloadnpm ↗GitHub ↗

• 監視するコレクションとグローバル、各イベントに含めるフィールドを選べます。
• リアルタイムサービスが原因で保存が失敗することはありません。送信に失敗してもログに残るだけで、保存はそのまま完了します。
• 独自の処理には useLiveChanges()、Next.js 以外のフロントエンドには subscribe() を使えます。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

1. インストール

   npm install @hibira-io/payload pusher-js
   
   # .env
   HIBIRA_APP_ID=YOUR_APP_ID
   HIBIRA_APP_SECRET=YOUR_APP_SECRET
   NEXT_PUBLIC_HIBIRA_APP_KEY=YOUR_APP_KEY
   NEXT_PUBLIC_HIBIRA_HOST=ws.hibira.io

2. 設定する

   // payload.config.ts
   import { hibiraPlugin } from '@hibira-io/payload';
   
   export default buildConfig({
     plugins: [
       hibiraPlugin({
         collections: { posts: true, products: { fields: ['price', 'stock'] } },
         globals: { header: true },
       }),
     ],
   });

3. 使う

   // app/(frontend)/posts/[slug]/page.tsx
   import { LiveRefresh } from '@hibira-io/payload/react';
   
   export default async function Post({ params }) {
     const post = await getPost((await params).slug);
     return (
       <article>
         <LiveRefresh collection="posts" id={post.id} />
         <h1>{post.title}</h1>
       </article>
     );
   }

始める前に

• アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
• Free プランでは、ページを読み込むすべてのオリジンをアプリの許可オリジンに登録してください（開発中は http://localhost:3000、その後は自分のドメイン）。"*" は有料プランで使えます。
• チャンネルは公開なので、誰が見てもよいフィールドだけを指定してください。Free プランでは 4 KB を超えるイベントはフィールドなしで送られます。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →