Next.js

NEXT_PUBLIC_MIRAFIVE_KEY=mf_…
MIRAFIVE_SECRET_KEY=mf_…

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

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <MiraProvider>{children}</MiraProvider>
      </body>
    </html>
  )
}

import { mira } from '@mirafive/sdk-next/server'

export async function GET() {
  const receipt = await mira().send([{ name: '$install_check' }])

  return Response.json(receipt)
}

'use client'

import { useMira } from '@mirafive/sdk-next'

export function SignupButton() {
  const mira = useMira()

  return <button onClick={() => mira.track('signup_clicked', { plan: 'pro' })}>Sign up</button>
}

import { mira } from '@mirafive/sdk-next/server'

export async function POST(request: Request) {
  const { userId } = (await request.json()) as { userId: string }

  mira().track('signup', { userId, properties: { plan: 'pro' } })

  return Response.json({ ok: true })
}

'use server'

import { mira } from '@mirafive/sdk-next/server'

export async function upgrade(userId: string) {
  mira().track('plan_upgraded', { userId, properties: { plan: 'pro' } })
}

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

const mira = useMira()

// From your consent manager's callback:
mira.consent({ statistics: true, experiments: true, targeting: false })

// After login:
mira.identify(user.id, { plan: user.plan })

// After logout:
mira.reset()

'use client'

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

export function Providers({ bootstrap, children }: { bootstrap: string; children: ReactNode }) {
  return (
    <MiraProvider bootstrap={bootstrap} plugins={[flags()]}>
      {children}
    </MiraProvider>
  )
}

import { flagsFor } from '@mirafive/sdk-next/server'
import type { ReactNode } from 'react'

import { Providers } from './providers'

export default async function RootLayout({ children }: { children: ReactNode }) {
  // Your own pseudonymous user id, when someone is signed in.
  const flags = await flagsFor({ userId: undefined })

  return (
    <html lang="en">
      <body>
        <Providers bootstrap={flags.bootstrap()}>{children}</Providers>
      </body>
    </html>
  )
}

'use client'

import { useFlag, useFlagConfig } from '@mirafive/sdk-next'

export function Checkout() {
  const newCheckout = useFlag('new-checkout', false)
  const { max } = useFlagConfig('limits', { max: 1 })

  return <h1>{newCheckout === true ? `New checkout, up to ${max}` : 'Checkout'}</h1>
}

import { flagsFor } from '@mirafive/sdk-next/server'

export default async function PricingPage() {
  const flags = await flagsFor()

  return <h1>{flags.enabled('new-pricing') ? 'New pricing' : 'Pricing'}</h1>
}

import { Mira } from '@mirafive/sdk-server'
import type { NextFetchEvent, NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

const mira = new Mira({ key: process.env.MIRAFIVE_SECRET_KEY, host: process.env.MIRAFIVE_HOST })

export function middleware(request: NextRequest, event: NextFetchEvent) {
  mira.track('api_request', { properties: { path: request.nextUrl.pathname } })
  event.waitUntil(mira.flush())

  return NextResponse.next()
}

export const config = { matcher: '/api/:path*' }

import type { NextConfig } from 'next'

const config: NextConfig = {
  transpilePackages: ['@mirafive/sdk-next'],
}

export default config

import { MiraFlagsScript } from '@mirafive/sdk-next/server'
import { bootstrapHeaders, MiraFlags } from '@mirafive/sdk-server/flags'
import Document, { type DocumentContext, Head, Html, Main, NextScript } from 'next/document'

const flags = new MiraFlags({ key: process.env.MIRAFIVE_SECRET_KEY, host: process.env.MIRAFIVE_HOST })

export default class MyDocument extends Document<{ bootstrap: string }> {
  static async getInitialProps(context: DocumentContext) {
    const initial = await Document.getInitialProps(context)
    const headers = context.req?.headers ?? {}
    const user = await flags.for({
      userId: undefined, // your own pseudonymous id, if signed in
      optedOut: headers['sec-gpc'] === '1' || headers['dnt'] === '1',
    })

    context.res?.setHeader('Cache-Control', bootstrapHeaders['Cache-Control'])
    return { ...initial, bootstrap: user.bootstrap() }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <MiraFlagsScript flags={this.props.bootstrap} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

import { MiraProvider, useFlag, useFlagConfig, useMira, useTrackOnMount } from '@mirafive/sdk-next'
import type { FlagBootstrap, MiraProviderProps } from '@mirafive/sdk-next'

import { flagsFor, mira, MiraFlagsScript } from '@mirafive/sdk-next/server'
import type { FlagUnit, UserFlags } from '@mirafive/sdk-next/server'

Add MIRA FIVE analytics and feature flags to this Next.js app with @mirafive/sdk-next.
Docs: https://docs.mirafive.io/sdks/nextjs.md

1. Install @mirafive/sdk-next, @mirafive/sdk-react, @mirafive/sdk-browser and @mirafive/sdk-server
   with the project's package manager.
2. Add to .env.local and the deployment's environment:
     NEXT_PUBLIC_MIRAFIVE_KEY=<website key, mf_…>
     MIRAFIVE_SECRET_KEY=<secret key of a server source>
   Never prefix the secret key with NEXT_PUBLIC_ and never read it in a 'use client' file.
3. App Router: wrap the body of app/layout.tsx in <MiraProvider> from '@mirafive/sdk-next'.
   It counts pageviews on every navigation; do not add usePathname effects.
4. Track in client components with useMira().track(name, properties) or useTrackOnMount(name, properties).
   Track on the server with mira().track(name, { userId, properties }) from '@mirafive/sdk-next/server'
   in route handlers, server actions and Server Components; after() sends the events.
5. For flags: create app/providers.tsx ('use client') exporting Providers, which renders
   <MiraProvider bootstrap={bootstrap} plugins={[flags()]}> (flags from '@mirafive/sdk-browser/flags').
   In app/layout.tsx REPLACE the plain <MiraProvider> with it (one provider, never nested):
     const flags = await flagsFor({ userId })   // from '@mirafive/sdk-next/server'
     <Providers bootstrap={flags.bootstrap()}>
   Do not add <MiraFlagsScript> as well. If next.config has cacheComponents: true, wrap that part in
   <Suspense>. Do not read flags in force-static pages or inside 'use cache'.
   Read flags with useFlag(key, fallback) and useFlagConfig(key, fallback).
6. Pages Router: <MiraProvider> in pages/_app.tsx; add transpilePackages: ['@mirafive/sdk-next'] to
   next.config before importing '@mirafive/sdk-next/server'; await mira().flush() in API routes.
7. Keep the default consentless mode, which needs no consent banner. Only if the app already has a
   consent manager and needs user ids: in the providers file add identity() from
   "@mirafive/sdk-browser/identity" to plugins, set mode="full", and call
   useMira().consent({ statistics, experiments, targeting }) from its callback.
8. Verify: run next build; on a deployed page check the network tab for
   POST https://events.mirafive.io/v1/batch/<key> answering 202. Server side,
   await mira().send([{ name: '$install_check' }]) resolves with reason 'install_check'.
   Report what you changed.
Do not add other analytics libraries, cookies or consent banners.