Next.js — Feedback, NPS and Analytics

Requires @lerix-dev/lerix-nextjs 1.4.0 or later. For what each module does and what you see in the dashboard, read Feedback, NPS surveys and Analytics.

Setup

Add LerixScreenTracker once, inside the LerixNextProvider from Installation. It records a $screen_view per pathname through usePathname(), and turns off the SDK’s History API tracking so nothing is counted twice.

app/layout.tsx

import { LerixErrorBoundary, LerixNextProvider, LerixScreenTracker } from '@lerix-dev/lerix-nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <LerixNextProvider>
          <LerixScreenTracker
            name={(path) => path.replace(/^\/products\/[^/]+/, '/products/[id]')}
          />
          <LerixErrorBoundary fallback={<p>Something went wrong.</p>}>
            {children}
          </LerixErrorBoundary>
        </LerixNextProvider>
      </body>
    </html>
  );
}

The optional name maps a pathname to a screen name. Use it to group dynamic routes, so /products/42 and /products/43 count as one screen. Return null to skip a path. Without LerixScreenTracker (in the Pages Router, for example), URL changes are still recorded through the History API.

Environment

LerixNextProvider reads NEXT_PUBLIC_LERIX_ENVIRONMENT as the default environment. Without it, the SDK sends dev on localhost and *.local or in debug mode, and prod elsewhere.

.env.production

NEXT_PUBLIC_LERIX_ENVIRONMENT=prod

The provider’s options prop also takes locale, analytics, feedback (theme, primaryColor, strings, zIndex) and captureConsoleErrors. They work as in React.

In-app feedback

components/feedback-button.tsx

'use client';
import { useLerixFeedback } from '@lerix-dev/lerix-nextjs';

export function FeedbackButton() {
  const feedback = useLerixFeedback();
  return <button onClick={() => feedback.show()}>Send feedback</button>;
}

The dialog renders inside a Shadow DOM and loads on first use, in its own chunk. show(options?) takes labels, email, screenshot, prefillEmail and custom, and submit({ message, labels?, email?, screenshots?, custom? }) sends feedback from your own form. See React for the full option list. Mask sensitive content in screenshots:

'use client';
import { LerixConfidential } from '@lerix-dev/lerix-nextjs';

<LerixConfidential>{user.email}</LerixConfidential>

NPS survey

app/(app)/home-client.tsx

'use client';
import { useLerixSurvey } from '@lerix-dev/lerix-nextjs';

export function HomeClient() {
  useLerixSurvey({ autoShow: true }); // the NPS card, when this install is due
  return null;
}

Or call maybeShowNps() from useLerixSurvey() yourself, with { force: true } while testing. See When the survey is shown.

Analytics

'use client';
import { useLerixTrack } from '@lerix-dev/lerix-nextjs';

export function CheckoutButton() {
  const track = useLerixTrack();
  return <button onClick={() => track('checkout_started', { items: 3 })}>Checkout</button>;
}

$first_open, $session_start / $session_end, $app_update and $screen_view are recorded automatically.
useLerixScreen('Settings / Billing') names a screen the URL doesn’t, such as a tab or a modal step.
Lerix.analytics.setEnabled(false) is the persisted opt-out, and Lerix.analytics.flush() sends right away. Lerix is re-exported from @lerix-dev/lerix-nextjs.

This package records events in the browser. For events from code on the Edge runtime, see Edge Functions.

Call setUser after sign-in. Analytics then counts the person across devices, and you can reply to their feedback by push.

Breadcrumbs

'use client';
import { Lerix } from '@lerix-dev/lerix-nextjs';

Lerix.addBreadcrumb('Applied coupon', 'ui', { code: 'EID' });

The last 50 breadcrumbs (navigation is added automatically) are attached to feedback.

Getting started

Frameworks

Modules

Developers

Next.js — Feedback, NPS and Analytics

Setup

Environment

In-app feedback

NPS survey

Analytics

​Setup

​Environment

​In-app feedback

​NPS survey

​Analytics

​Breadcrumbs

Setup

Environment

In-app feedback

NPS survey

Analytics

Breadcrumbs