公式パッケージ · 自動化とインフラ

リアルタイムな 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 ボタンはこのインテグレーションも追加するので、複製したデモはキーをコピーせずに動きます。

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

インストール

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.

ルートハンドラーから発行する

// 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 });
}

使う

'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 とまったく同じように動作します。無料でアカウントを作成 →