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
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:
- Initialize the LaunchDarkly React SDK in a Client component.
- Use code-splitting to defer the loading of the React web SDK until page hydration phase.
- Call the use() hook to enable async calls in the Client component. Read the React RFC why Client components can't be async functions.
- When loading the asyncWithLDProvider component, call
dynamic()and set thessroption tofalseto 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>
);
}
- LaunchDarkly account
- Node.js version >= 16.8.x
- Next.js version 14.x
This Next.js project was bootstrapped with
create-next-app.
-
Create a feature flag in your LaunchDarkly account with the following details:
Flag Key Flag Type Description simple-toggle boolean Toggles flag status -
Clone this repository and navigate to the project directory.
-
Install the required packages by running:
npm install -
Create a
.envfile 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.
-
Start the development server:
npm run devNote: 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.
-
Open http://localhost:3000 with your browser to see the result.
For more information check out the following resources:
- LaunchDarkly React Web SDK - how to get started with the client-side React Web SDK, and links to reference information on all of the supported features.
- LaunchDarkly Quick Start Guide - describes how to get started with LaunchDarkly
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
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.