官方套件 · 框架

Payload CMS 的即時內容

Payload 3 外掛：編輯發布、更新或刪除時送出事件；Next.js 的 <LiveRefresh> 會在頁面內容變更時重新整理伺服器元件。頁面可維持靜態或快取，也能在 Vercel 上執行。

@hibira-io/payloadnpm ↗GitHub ↗

• 選擇要監看的 collection 與 global，以及每個事件要帶的欄位。
• 即時服務出問題也不會讓儲存失敗：送出失敗只會寫進記錄，儲存照常完成。
• useLiveChanges() 可自行處理變更，subscribe() 則給 Next.js 以外的前端使用。

登入後，範例程式碼會自動帶入您的叢集主機。 登入

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 的事件會不帶欄位送出。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →