@tirs/nextjs
v0.2.11
Published
Next.js bindings for the Tirs Care SDK: <TirsScript> on next/script for app-router layouts, plus client provider re-exports.
Readme
@tirs/nextjs
Next.js bindings for the Tirs Customer Care SDK. Adds console + network capture to your app so customer recordings made through Tirs care links arrive with full technical context.
What it does
<TirsScript>(from@tirs/nextjs/script) installs the SDK vianext/scriptwithbeforeInteractive, so capture starts ahead of hydration and your app bundles. Server-component safe — drop it straight into a layout.- The root export provides
<TirsProvider>/useTirs()with the'use client'directive already baked in, for apps that prefer the bundled install.
How to use
npm i @tirs/nextjsRecommended — the script install, in your root layout:
// app/layout.tsx (server component — nothing extra needed)
import { TirsScript } from '@tirs/nextjs/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<TirsScript tirsKey="YOUR-KEY" />
{children}
</body>
</html>
);
}Your key comes from the Tirs app: Customer care → Domains & Install.
Bundled alternative:
// app/layout.tsx
import { TirsProvider } from '@tirs/nextjs';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<TirsProvider config={{ key: 'YOUR-KEY' }}>{children}</TirsProvider>
</body>
</html>
);
}And client-side state where useful:
'use client';
import { useTirs } from '@tirs/nextjs';
export function SupportIndicator() {
const { status } = useTirs();
return status === 'capturing' ? <span>Recording in progress…</span> : null;
}Optional configuration
<TirsScript>
| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| tirsKey | string | — | Your workspace key. Required. |
| preroll | number (ms) | 0 | Keep a rolling window of activity from before recording starts. |
| cdnBase | string | Tirs CDN v1 | Pin a specific version (e.g. …/v0.1.2) instead of auto-updating. |
| integrity | { capture?, recorder? } | — | Subresource-integrity hashes. Only valid with a pinned cdnBase. |
| appUrl | string | Tirs app | Override the Tirs app origin. Self-hosted deployments only. |
<TirsScript tirsKey="YOUR-KEY" preroll={30_000} /><TirsProvider>
| Prop | Type | What it does |
| --- | --- | --- |
| config | TirsInitOptions | Capture runtime options — key, redact, preroll, denyUrls, captureBodies, maxBodyBytes, debug. |
| recorder | RecorderOptions | Recording panel placement — position, offset, zIndex. |
<TirsProvider
config={{ key: 'YOUR-KEY', preroll: 30_000, denyUrls: [/\/auth\//] }}
recorder={{ position: 'bottom-left' }}
>
{children}
</TirsProvider>Defaults are safe for production: redaction is on, pre-roll is off, bodies are captured up to
64 KB each. Full option list on the @tirs/core page; panel options on the @tirs/recorder
page.
MIT © Tirs