# Sehen, welche Kampagne Kunden bringt

> MIRA FIVE in Next.js einrichten: @mirafive/sdk-next, ein Provider im Root-Layout, eigene Events per Hook und bezahlte Bestellungen aus Route Handlern.

URL: https://mirafive.io/de/fuer/nextjs  
Updated: 2026-09-28

Ein Provider im Root-Layout zählt jede Navigation, Ihre Route Handler melden die bezahlten Bestellungen.

Paket `@mirafive/sdk-next`

## In 5 Schritten eingerichtet

1. ### Pakete installieren  
`@mirafive/sdk-next` bringt Provider und Server-Einstieg mit. Es setzt Next.js 15.1 oder 16, React 18.3 oder 19 und Node.js 20 oder neuer voraus.  
```  
npm install @mirafive/sdk-next @mirafive/sdk-react @mirafive/sdk-browser @mirafive/sdk-server  
```
2. ### Zwei Schlüssel eintragen  
Der Website-Schlüssel Ihrer Website-Quelle geht in den Browser. Der geheime Schlüssel einer Server-Quelle bleibt auf dem Server und bekommt nie das Präfix `NEXT_PUBLIC_`.  
```  
NEXT_PUBLIC_MIRAFIVE_KEY=mf_…  
MIRAFIVE_SECRET_KEY=mf_…  
```
3. ### Provider ins Root-Layout setzen  
Der Provider legt den Browser-Client einmal an und zählt die erste Seite und jede Navigation, im App Router wie im Pages Router.  
```  
import { MiraProvider } from '@mirafive/sdk-next'  
import type { ReactNode } from 'react'  
export default function RootLayout({ children }: { children: ReactNode }) {  
  return (  
    <html lang="de">  
      <body>  
        <MiraProvider>{children}</MiraProvider>  
      </body>  
    </html>  
  )  
}  
```
4. ### Eigenes Event senden  
`useMira()` funktioniert in jeder Client-Komponente unterhalb des Providers. In MIRA FIVE machen Sie aus Events Aktionen und Ziele.  
```  
'use client'  
import { useMira } from '@mirafive/sdk-next'  
export function AddToCart() {  
  const mira = useMira()  
  return <button onClick={() => mira.track('added_to_cart', { product: 'merino-shirt' })}>In den Warenkorb</button>  
}  
```
5. ### Bestellung vom Server melden  
`mira()` aus `@mirafive/sdk-next/server` ist ein Server-Client pro Prozess, gebaut aus `MIRAFIVE_SECRET_KEY`. In einer Anfrage sendet er nach der Antwort, niemand wartet.  
```  
import { mira } from '@mirafive/sdk-next/server'  
// Im Route Handler, der die Zahlung bestätigt  
mira().track('order_paid', {  
  userId: order.customerId,  
  properties: { revenue: 328, currency: 'EUR' },  
})  
```

## Was sehen Sie nach der Installation?

Die Einrichtung oben zählt ohne Cookies und ohne Speicher auf dem Gerät: Besuche, Seiten, Kanäle, Kampagnen, Länder, Geräte und Events. Danach füllen sich die Übersicht, [Herkunft › Kanäle](https://mirafive.io/de/produkt/herkunft) und [Wege › Seiten](https://mirafive.io/de/produkt/wege) mit den Zahlen Ihrer App.

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Mit Einwilligung führt der Browser eine Kennung, und `identify` verknüpft sie beim Anmelden mit Ihrer Nutzer-ID. Meldet der Route Handler die Bestellung mit derselben ID, landet der Kauf bei dieser Person, neben der Kampagne, über die sie zuerst kam.

Mit einem Kaufziel auf `order_paid` zeigt Herkunft › Kanäle Käufer und Umsatz je Kanal und Kampagne. Mit verbundenem Google Ads kommen die [Kosten pro Käufer](https://mirafive.io/de/lernen/google-ads-kosten-pro-kaeufer)dazu.

## Wie erfassen Sie mit Einwilligung?

Stellen Sie die Website-Quelle unter **Daten → Quellen** auf **Vollständig**. Plugins sind Funktionen. Setzen Sie den vollen Modus deshalb in einer eigenen Client-Datei und nutzen Sie diese im Root-Layout statt des einfachen Providers:

```tsx
'use client'

import { identity } from '@mirafive/sdk-browser/identity'
import { MiraProvider } from '@mirafive/sdk-next'
import type { ReactNode } from 'react'

export function Providers({ children }: { children: ReactNode }) {
  return (
    <MiraProvider mode="full" plugins={[identity()]}>
      {children}
    </MiraProvider>
  )
}
```

In Client-Komponenten übergeben Sie dann die Antwort Ihres Banners und die angemeldete Person:

```tsx
const mira = useMira()

// Aus dem Callback Ihres Consent-Banners
mira.consent({ statistics: true, experiments: true, targeting: false })

// Nach der Anmeldung, mit Ihrer eigenen Nutzer-ID
mira.identify(user.id, { plan: user.plan })

// Nach der Abmeldung
mira.reset()
```

Vor der Antwort speichert und sendet der volle Modus nichts. Kennungen liegen im localStorage, nie in Cookies.

## Wie zählt ein Webhook nur einmal?

Mit `send` und einem Idempotenzschlüssel. Eine Wiederholung mit demselben Schlüssel wird einmal gespeichert:

```ts
await mira().send(
  [{ name: 'order_paid', userId: order.customerId, properties: { revenue: 328, currency: 'EUR' } }],
  { idempotencyKey: `order-${order.id}` },
)
```

## Zeigen Feature-Flags gleich die richtige Variante?

Ja. `flagsFor()` aus `@mirafive/sdk-next/server` liest die [Feature-Flags](https://mirafive.io/de/glossar/feature-flag)im Root-Layout, und der Provider reicht die Antworten an den Browser weiter. Client-Komponenten lesen sie mit `useFlag`. Ein Code-[A/B-Test](https://mirafive.io/de/glossar/ab-test) ist ein Flag, das genauso gelesen wird. Die Einzelheiten stehen in der [Dokumentation](https://docs.mirafive.io/sdks/nextjs).

## Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

- [React](https://mirafive.io/de/fuer/react)
- [Astro](https://mirafive.io/de/fuer/astro)
- [Laravel](https://mirafive.io/de/fuer/laravel)
- [Nuxt](https://mirafive.io/de/fuer/nuxt)
- [Symfony](https://mirafive.io/de/fuer/symfony)
- [PHP](https://mirafive.io/de/fuer/php)
- [Vue](https://mirafive.io/de/fuer/vue)
- [TanStack Start](https://mirafive.io/de/fuer/tanstack-start)
- [Node.js](https://mirafive.io/de/fuer/nodejs)
- [Convex](https://mirafive.io/de/fuer/convex)
- [JavaScript](https://mirafive.io/de/fuer/javascript)
- [jede Website](https://mirafive.io/de/fuer/website)

[Zur Dokumentation](https://docs.mirafive.io)

## Fragen und Antworten

### Funktioniert das im Pages Router?

Ja. Setzen Sie MiraProvider in pages/\_app.tsx. Vor dem Import des Server-Einstiegs gehört @mirafive/sdk-next in transpilePackages, und in API-Routen rufen Sie await mira().flush() auf.

### Warum zwei Schlüssel?

Der Website-Schlüssel steht öffentlich in der Seite und ist durch die erlaubten Origins seiner Quelle geschützt. Der geheime Schlüssel bleibt auf dem Server; gelangt er in einen Browser, ersetzen Sie ihn.

### Welche Versionen werden unterstützt?

Next.js 15.1 und 16, React 18.3 und 19 sowie Node.js ab Version 20.

## Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

[Kostenlos starten](https://app.mirafive.io/register)[Zu den Preisen](https://mirafive.io/de/preise)