Launch Darkly 有一个示例（https://github.com/launchdarkly/react-client-sdk/blob/main/examples/async-provider/src/client/index.js）如何将 asyncWithLDProvider 与React 项目（如下），但我不知道如何将其与我的 Next 应用程序集成。
示例
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
(async () => {
const LDProvider = await asyncWithLDProvider({
clientSideID: 'client-side-id-123abc',
user: {
"key": "user-key-123abc",
"name": "Sandy Smith",
"email": "[email protected]"
},
options: { /* ... */ }
});
render(
<LDProvider>
<YourApp />
</LDProvider>,
document.getElementById('reactDiv'),
);
})();
已尝试在 _app.tsx 文件中创建一个提供程序并包装整个应用程序，但由于
asyncWithLDProviderawait类似这样的事情
const App = ({ Component }) = {
// but how to get this async function to work with the React lifecycle stumps me
const LDProvider = await asyncWithLDProvider({
clientSideID: 'client-side-id-123abc',
});
return (
<LDProvider>
<Component />
</LDProvider>
)
}
这是我的 _app.tsx （已删除一些导入以节省空间）
这是一个小组项目，并非所有这些都是我写的。
import { Next, Page } from '@my/types';
import NextHead from 'next/head';
import { QueryClient, QueryClientProvider } from 'react-query';
const App = ({
Component,
pageProps: { session, ...restProps },
}: Next.AppPropsWithLayout) => {
const { pathname } = useRouter();
const { description, title } = Page.getMetadata(pathname, ROUTES);
const getLayout = Component.getLayout ?? ((page) => page);
const WithRedirectShell = withRedirect(Shell);
const queryClient = new QueryClient();
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: 'mantine-color-scheme',
defaultValue: 'light',
getInitialValueInEffect: true,
});
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
useHotkeys([['mod+J', () => toggleColorScheme()]]);
return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{ colorScheme, ...theme }}
>
<NotificationsProvider position='top-center' zIndex={2077} limit={5}>
<SessionProvider session={session}>
<QueryClientProvider client={queryClient}>
<NextHead>
<Head description={description} title={title} />
</NextHead>
<WithRedirectShell header={<Header />}>
{getLayout(<Component {...restProps} />)}
</WithRedirectShell>
</QueryClientProvider>
</SessionProvider>
</NotificationsProvider>
</MantineProvider>
</ColorSchemeProvider>
);
};
export default App;
这是我的index.tsx
import { Next } from "@my/types";
const Home: Next.Page = () => null;
export default Home;
launchdarkly-react-client-sdkLDProvider使用应用程序路由，您可以创建一个 Provider 组件并传入您的用户上下文。在此文件的顶部，添加“use client”以使其成为客户端组件。然后，您可以将此组件导入到根布局中。布局组件将仍然是服务器组件，如果子组件是服务器组件，它们将仍然是服务器组件。
'use client';
import React from 'react';
import { LDProvider } from 'launchdarkly-react-client-sdk';
export const Providers = ({ children, user }: Props) => {
const LDContext = {
kind: 'user',
key: 'user key here',
};
return (
<LDProvider
context={LDContext}
clientSideID="YOUR KEY HERE"
>
{children}
</LDProvider>
);
}
还有一个使用页面路由的示例应用程序：https://github.com/tanben/sample-nextjs