공식 패키지 · 프레임워크

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와 똑같이 동작합니다. 무료 계정 만들기 →