# Install on Next.js
> Install Kismet Telemetry in a Next.js app with @kismet-tech/telemetry-next, three files, and verify with six checks.
`@kismet-tech/telemetry-next` wraps the [core](https://developers.kismet.travel/telemetry.md) for the App Router: a middleware that does the whole [contract](https://developers.kismet.travel/telemetry/contract.md) on every page request, a seed component for the root layout, and the checkout call. Edge or Node runtime; Next 14.2 or later.
**Contract 1.0 limit:** `externalListingId` can be emitted, but ingest-side resolution and generic conversions are Contract 1.1 additions. For property-level attribution today, arrange a registered serving-URL mapping or use a known Kismet property slug. Confirm backend support before relying on the 1.1 fields.
## Before you start
Request from Kismet during onboarding: the collection slug and the collection's tracking key. Put them in the environment, never in a page:
```dotenv
KISMET_COLLECTION_SLUG=your-collection
KISMET_TRACKING_KEY=ctk_...
```
Confirm your production and staging hostnames are on the collection's authorized domains. The browser tracker's origin is its credential; an unregistered hostname means client-side events are rejected once enforcement is on.
```sh
npm install @kismet-tech/telemetry@1.1.1 @kismet-tech/telemetry-next@1.1.1
```
## 1. The middleware
```ts
// middleware.ts
import { createKismetMiddleware, KISMET_MATCHER, consentFromCookie } from '@kismet-tech/telemetry-next';
export const middleware = createKismetMiddleware({
collectionSlug: process.env.KISMET_COLLECTION_SLUG!,
trackingKey: process.env.KISMET_TRACKING_KEY!,
// Your consent manager's cookie. Consent gates the session, not the recording.
consent: consentFromCookie('CookieConsent', /statistics:true/),
// Which URLs are what, once. Your own listing id is fine: send it as
// externalListingId; ingest resolution requires Contract 1.1.
profile: {
property: { pattern: /^\/stays\/[^/]+\/([^/]+)\/?$/, as: 'externalListingId' },
searchPaths: ['/stays', /^\/stays\/in\//],
intent: { path: '/stays/checkout', checkinParam: 'checkin', checkoutParam: 'checkout', guestsParam: 'guests' },
},
});
export const config = { matcher: KISMET_MATCHER };
```
`KISMET_MATCHER` covers pages and the two agent index files (`/llms.txt`, `/.well-known/llm-index.json`) and never assets or `/api/*`.
Already have a middleware? Pass it as `next`. Telemetry resolves the visitor first, calls yours with the seed headers on the request, and adds its cookies and headers to whatever you return:
```ts
export const middleware = createKismetMiddleware({
...config,
next: async (request, event, visitor) => {
// visitor.kidSid, visitor.tier and visitor.classification are available here
return NextResponse.next({ request: { headers: request.headers } });
},
});
```
## 2. The seed
In the root layout, first thing in ``:
```tsx
// app/layout.tsx
import { KismetSeed } from '@kismet-tech/telemetry-next/seed';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`KismetSeed` reads the headers the middleware attached, which makes the layout dynamic. That is what you want: a seeded page must never be statically cached. It renders one inline script that sets the seed and then appends the browser tracker tag itself, because React 19 hoists `