DevCycle's New Next.js SDK: Elevating Feature Flagging in Next.js Apps

At DevCycle, our mission has always been to enable teams to build great software with feature flagging tools that enhance the developer experience. We're excited to announce our latest milestone: the launch of our first-class Next.js SDK. This SDK fully supports the latest features of Next.js, allowing you to work on the bleeding edge with a seamless feature flagging experience. Now, you can hide unreleased features from users, eliminate long-running feature branches, run A/B tests, and roll back buggy changes in real time.

Here's what you can expect:

• Seamless Integration with App Router and Server Component Rendering: Our SDK works with the Next.js App Router, allowing you to flag features in Server Components.
• Realtime Updates of Flag Configuration: Change your feature flag configurations in realtime and watch as your server- and client-rendered content updates dynamically.
• Faster Performance with Static and Streaming Content: We've designed our SDK for lightning-fast page rendering, fully supporting static pages and streaming with Suspense.
• Consistent Experience Across Server and Client: DevCycle ensures a unified set of flag values on both ends, maintaining server- and client-rendering coherence.
• Local Evaluation of Flag Rules: Determine user-specific flag values locally on your backend for sub-millisecond evaluation times.

Let's dive into some of the challenges we faced while developing this SDK and explore how these innovative features work.

Background: The New Paradigm of Next.js App Router

Understanding the intricacies of Next.js's App Router and React Server Components is key to appreciating our SDK's capabilities. These technologies represent a major shift in the React ecosystem, allowing you to write components which are only executed and rendered on the server. The result is smaller bundles and the ability for components to interact directly with server backends while rendering.

For more insights into server components, we recommend this article.

How DevCycle Fits In

Integrating feature flagging into the new App Router system required managing user state management challenges unique to Next.js:

1. Ensuring fast flag value retrieval without impeding the server rendering process.
2. Keeping server and client flag variables consistent for seamless hydration.
3. Eliminating redundant client requests for flags by utilizing server-obtained values.
4. Allowing real-time updates to flag values, including server-side component re-rendering.

How to Use the New SDK

Using our SDK is straightforward. Initialize the SDK, tell us how to identify your user, and you're set to use getVariableValue in server components and useVariableValue in client components.

Server component example:

import { getVariableValue } from '#/app/devcycle'
import { NewComponent, OldComponent } from '@/components'

export const MyServerComponent = async function () {
    const newDesign = await getVariableValue('newDesign', false)
    return newDesign ? <NewComponent /> : <OldComponent />
}

Client component example:

'use client'
import { useVariableValue } from '@devcycle/nextjs-sdk'
import { NewComponent, OldComponent } from '@/components'

export const MyClientComponent = function () {
    const newDesign = useVariableValue('newDesign', false)
    return newDesign ? <NewComponent /> : <OldComponent />
}

Check out the code snippets in our detailed documentation.

The Inner Workings

Our SDK is used in both server-side and client-side components. On the server, it fetches and caches a DevCycle project configuration. It then runs a local decision engine using that configuration and the current request’s user data. The result is a sub-millisecond retrieval of flag values for a given user.

The flag values are then provided through the asynchronous getVariableValue function. In streaming mode, this function will trigger the nearest Suspense any time the configuration is not yet available.

The SDK server portion provides the client with relevant context, including the configuration and current user data. On the client, a React context provides flag values, and a realtime connection is maintained for configuration updates. Using Next.js Server Actions, the SDK can trigger your backend to invalidate and re-render anytime the configuration changes.

Overcoming Challenges

Developing this SDK wasn't without its hurdles. We navigated complexities of working on the bleeding edge of Next.js such as:

• Context Sharing on the Backend: We developed an efficient approach to share flag values and context across server components.
• Server Action Bundler Limitations: Our development was initially hampered by a bug in Next's bundling system preventing Server Actions from being used in 3rd party libraries, which we reported and had fixed.
• Consistency in User Data and Rendering Results: The SDK had to ensure consistency of flag values and user data across server and client to prevent hydration errors.
• Navigating Next.js's Evolving Features: As the App Router continues to improve, we had to work around currently missing features, particularly when sending analytics events from the server.

Check out our technical deep dive into these challenges.

Conclusion

Our journey in building a feature-flagging SDK for Next.js forced us to learn the depths of the Next.js rendering pipeline and how context is shared between the client and server side. As users of Next.js ourselves for our dashboard, we are excited to support the continued evolution of the NextJS project and see how developers will leverage these new capabilities in their own NextJS applications. Your feedback and experiences are invaluable to us, so we invite you to share your thoughts and suggestions.

Ready to explore modern feature flagging with Next.js and DevCycle? Dive into our new SDK!