Next.js SDK Usage - Pages Router

Usage

Wrap your App in the DevCycle Higher-Order Component

In your _app.tsx file, wrap the App component in the DevCycle Higher-Order Component:

// _app.tsx
import React from 'react'
import type { AppProps } from 'next/app'
import { appWithDevCycle } from '@devcycle/nextjs-sdk/pages'

function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
}

export default appWithDevCycle(MyApp)

In each page in your App where you are using DevCycle, hook up the server-side helper to retrieve configuration on the server and allow for server-side rendering using the same user data as the client:

import { GetServerSideProps } from 'next'
import { getServerSideDevCycle } from '@devcycle/nextjs-sdk/pages'

export const getServerSideProps: GetServerSideProps = async (context) => {
    // get the user identity serverside. Replace with your own function for determining your user's identity
    const user = {
        user_id: 'server-user',
    }
    return {
        props: {
            ...(await getServerSideDevCycle({
                serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY || '',
                clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY || '',
                user,
                context,
            })),
        },
    }
}

This helper will retrieve the DevCycle configuration and pass it to the rest of the component tree. It will bootstrap DevCycle on the client browser with the same configuration used by the server, allowing for faster page rendering and matching hydration of client-rendered and server-rendered content.

From this point, usage becomes the same as the DevCycle React SDK. Refer to the documentation for that SDK.

The same hooks used in that SDK are re-exported from this SDK.

For example, to retrieve a variable value in a component:

import { useVariableValue } from '@devcycle/nextjs-sdk/pages'
import * as React from 'react'

export const MyComponent = () => {
    const myVariable = useVariableValue('myVariable', false)
    return myVariable ? <NewComponent/> : <OldComponent/>
}

Static Rendering

If your page uses static rendering instead, you can use the static version of the DevCycle helper:

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async () => {
    // get the user identity serverside. Replace with your own function for determining your user's identity
    const user = {
        user_id: 'server-user',
    }
    return {
        props: {
            ...(await getStaticDevCycle
            (
              {
                serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY || '',
                clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY || '',
                user,
              }
            )),
        },
    }
}

The static version of the helper still retrieves the DevCycle configuration and allows for client boostrapping. However, it omits features that rely on the dynamic request information to work. This includes:

• automatic determination of the platform version based on the user agent of the request. Targeting by this property in the DevCycle platform will be unavailable.

Initialization Options

The SDK exposes various initialization options which can be set by passing a DevCycleOptions object in the appWithDevCycle method:

DevCycleOptions Typescript Schema

DevCycle Option	Type	Description
logger	DevCycleLogger	Logger override to replace default logger
logLevel	DevCycleDefaultLogLevel	Set log level of the default logger. Options are: debug, info, warn, error. Defaults to info.
eventFlushIntervalMS	Number	Controls the interval between flushing events to the DevCycle servers in milliseconds, defaults to 10 seconds.
flushEventQueueSize	Number	Controls the maximum size the event queue can grow to until a flush is forced. Defaults to 100.
maxEventQueueSize	Number	Controls the maximum size the event queue can grow to until events are dropped. Defaults to 1000.
apiProxyURL	String	Allows the SDK to communicate with a proxy of DevCycle bucketing API / client SDK API.
disableRealtimeUpdates	Boolean	Disable Realtime Updates
disableAutomaticEventLogging	Boolean	Disables logging of sdk generated events (e.g. variableEvaluated, variableDefaulted) to DevCycle.
disableCustomEventLogging	Boolean	Disables logging of custom events, from track() method, and user data to DevCycle.