Skip to content

This project showcases a robust integration of LaunchDarkly feature flags within a Next.js application, leveraging the App Router architecture. It demonstrates best practices for implementing LaunchDarkly in both Client and Server components, while exploring various rendering strategies to optimize performance and user experience.

License

Notifications You must be signed in to change notification settings

tanben/sample-nextjs

Repository files navigation

LaunchDarkly Next.js App Router Demo

This is a sample LaunchDarkly implementation on Next.js using the App Router with Client and Server components and various rendering strategies. It demonstrates how to integrate LaunchDarkly feature flags into a Next.js application.

Rendering Performance: Server vs Client components

Integrating LaunchDarkly React SDK in Next.js

Challenges and Solutions

If you're developing with client components in Next.js, it's crucial to have a good grasp of how the platform manages client-side prerendering and the impact it may have on browser-specific libraries such as the LaunchDarkly React web SDK. For more information on this topic, I suggest checking out this article titled "Why do Client Components get SSR'd to HTML?".

Next.js improves page load times by prerendering both Client and Server components on the server and sending prerendered HTML to the browser. This makes page load times faster, especially for pages with lots of content and complex JavaScript. During server-side prerendering, Client components do not involve hydration, which can cause runtime errors when browser-specific APIs are used such as when calling LaunchDarkly React SDK asyncWithLDProvider.

To avoid this, consider implementing the following:

  1. Initialize the LaunchDarkly React SDK in a Client component.
  2. Use code-splitting to defer the loading of the React web SDK until page hydration phase.
  3. Call the use() hook to enable async calls in the Client component. Read the React RFC why Client components can't be async functions.
  4. When loading the asyncWithLDProvider component, call dynamic() and set the ssr option to false to disable server-side rendering.

Here is an example of how to incorporate these modifications:

Client component: components/AsyncWithLDProvider.js

'use client';

import { use} from "react";
import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";

export default function AsyncLDProvider({ children }) {
 
  //  1. Call use() hook,
  //  2. Initialize LaunchDarkly SDK as usual

  const LDDynaProvider = use(
    asyncWithLDProvider({
      clientSideID: "<client side ID> ",
      context: {
        kind: "user",
        key: "user-key-123abc",
        name: "Sandy Smith",
        email: "sandy@example.com",
      },
    })
  );
  return <LDDynaProvider>{children}</LDDynaProvider>;
}

then call it in app/layout.js:

import dynamic from "next/dynamic";
import { Suspense } from "react";

// 1. Disable SSR
// 2. Defer loading the Client component

const AsyncLDProvider = dynamic(
  () => import("@/components/AsyncWithLDProvider"),
  {
    ssr: false,
  }
);

export const metadata = {
  title: "LaunchDarkly Demo",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body>
        <Suspense>
          
          <AsyncLDProvider> {children} </AsyncLDProvider>

        </Suspense>
      </body>
    </html>
  );
}

Prerequisites

  • LaunchDarkly account
  • Node.js version >= 16.8.x
  • Next.js version 14.x

This Next.js project was bootstrapped with create-next-app.

Setup

  1. Create a feature flag in your LaunchDarkly account with the following details:

    Flag Key Flag Type Description
    simple-toggle boolean Toggles flag status
  2. Clone this repository and navigate to the project directory.

  3. Install the required packages by running:

    npm install
    
  4. Create a .env file in the project root and add the following environment variables:

    LAUNCHDARKLY_SDK_KEY="<LaunchDarkly Server-side SDK Key"
    CLIENT_SIDE_ID="<LaunchDarkly Client Side ID>"
    

    Replace <LaunchDarkly Server-side SDK Key> with your LaunchDarkly server-side SDK key and <LaunchDarkly Client-side ID> with your LaunchDarkly client-side ID.

Running the Demo

  1. Start the development server:

    npm run dev
    

    Note: If you encounter a Server 500 error while running the app, as discussed in vercel/next.js#49677, switch to Node.js version 16.8.

  2. Open http://localhost:3000 with your browser to see the result.

Learn More

For more information check out the following resources:

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

About

This project showcases a robust integration of LaunchDarkly feature flags within a Next.js application, leveraging the App Router architecture. It demonstrates best practices for implementing LaunchDarkly in both Client and Server components, while exploring various rendering strategies to optimize performance and user experience.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published