공식 패키지 · 자동화와 인프라

실시간 Next.js 앱을 위한 Vercel 통합

Vercel 프로젝트에 Hibira 통합을 추가하고 앱을 고르거나 새로 만들면, 앱 ID, 키, 시크릿, 호스트가 환경 변수로 프로젝트에 추가됩니다. 다시 배포한 뒤 라우트 핸들러에서 발행하고 pusher-js로 구독하세요.

Vercel integrationGitHub ↗Vercel ↗

• HIBIRA_APP_ID, HIBIRA_APP_KEY, HIBIRA_APP_SECRET, HIBIRA_HOST, HIBIRA_CLUSTER와 브라우저용 NEXT_PUBLIC_HIBIRA_APP_KEY, NEXT_PUBLIC_HIBIRA_HOST를 Production, Preview, Development에 씁니다.
• 새 앱은 각 프로젝트의 .vercel.app 도메인에서 오는 연결을 받습니다. 커스텀 도메인과 프리뷰 URL은 앱 페이지의 Allowed origins에 추가하세요.
• Next.js 예제의 Deploy with Vercel 버튼이 이 통합도 설치하므로, 복제한 데모가 키를 복사하지 않아도 동작합니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

1. 설치

   https://vercel.com/integrations/hibira/new
     → Add Integration → pick a team and its projects
     → sign in to Hibira → pick an app or create one → Connect
   Redeploy the projects so they load the new variables.

2. 라우트 핸들러에서 발행하기

   // app/api/orders/route.js
   import Pusher from 'pusher';
   
   const pusher = new Pusher({
     appId: process.env.HIBIRA_APP_ID,
     key: process.env.HIBIRA_APP_KEY,
     secret: process.env.HIBIRA_APP_SECRET,
     host: process.env.HIBIRA_HOST,
     useTLS: true,
   });
   
   export async function POST(req) {
     const order = await req.json();
     await pusher.trigger('orders', 'order.created', order);
     return Response.json({ ok: true });
   }

3. 사용하기

   'use client';
   import Pusher from 'pusher-js';
   
   const pusher = new Pusher(process.env.NEXT_PUBLIC_HIBIRA_APP_KEY, {
     cluster: 'hkg',
     wsHost: process.env.NEXT_PUBLIC_HIBIRA_HOST,
     forceTLS: true,
     enabledTransports: ['ws', 'wss'],
   });
   
   pusher.subscribe('orders').bind('order.created', (order) => {
     console.log('New order', order);
   });

시작하기 전에

• 변수는 연결할 때 기록됩니다. 나중에 앱 시크릿을 교체하면 프로젝트 설정의 HIBIRA_APP_SECRET을 바꾸고 다시 배포하세요.
• 발행은 서버 코드(라우트 핸들러, 서버 액션)에서만 하세요. HIBIRA_APP_SECRET이 클라이언트 컴포넌트에 들어가면 안 됩니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →