next-speedcurve

SpeedCurve integration for Next.js applications.

Installation

yarn add next-speedcurve

Usage

The SpeedCurve component will inject the SpeedCurve scripts into the document head and initialize RUM at the beginning of each SPA "page view".

The following example shows this being done via the Next.js App component:

import { SpeedCurve } from 'next-speedcurve';

const MyApp = ({ Component, pageProps }) => (
  <>
    <SpeedCurve
      luxId="123"
    />
    <Component
      {...pageProps}
    />
  </>
);

export default MyApp;

RUM API

The useSpeedCurveLUX() hook can be used to interact with the SpeedCurve RUM JS API, for example:

import { useSpeedCurveLUX } from 'next-speedcurve';

useSpeedCurveLUX({
  data: {
    'cart size': 128,
    'experiment A': 'control',
  },
  label: 'my-page',
  samplerate: 20,
});

The following properties are available:

Property	Description
auto	If set to false, the beacon is not sent at the window load event.
data	An object containing key value pairs to be added to the beacon.
debug	If set to true, debug messages are written to the browser console.
forceSample	Calling LUX.forceSample() changes your session cookie so that on all subsequent page views you will be sampled and should see RUM data being generated.
label	This is the “page label” used to group RUM data by page type.
samplerate	This is the sample rate for determining whether the beacon is sent.

See the SpeedCurve RUM JS API docs for more details about these properties.