Official package · Automation and infrastructure

Vercel integration for realtime Next.js apps

Add the Hibira integration to your Vercel projects and pick an app, or create one: its app ID, key, secret and host are added to the projects as environment variables. Redeploy, then publish from route handlers and subscribe with pusher-js.

Vercel integrationGitHub ↗Vercel ↗

• Writes HIBIRA_APP_ID, HIBIRA_APP_KEY, HIBIRA_APP_SECRET, HIBIRA_HOST and HIBIRA_CLUSTER, plus NEXT_PUBLIC_HIBIRA_APP_KEY and NEXT_PUBLIC_HIBIRA_HOST for the browser, to Production, Preview and Development.
• A new app accepts connections from each project’s .vercel.app domain. Add custom domains and preview URLs under Allowed origins on the app’s page.
• The Deploy with Vercel buttons on our Next.js examples install it for you, so a cloned demo runs without copying keys.

Sign in to see these snippets with your own cluster host. Sign in

1. Install

   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. Publish from a route handler

   // 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 it

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

Before you start

• The variables are written when you connect. If you rotate the app’s secret later, update HIBIRA_APP_SECRET in the project’s settings and redeploy.
• Publish only from server code (route handlers, server actions); HIBIRA_APP_SECRET must never reach a client component.

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →