Preview plugin

1
const preview = process.env.NODE_ENV !== 'production'

1
<NinetailedProvider
2
  ... // Other provider props
3
  plugins={[
4
    ...(preview
5
      ? [
6
          new NinetailedPreviewPlugin({
7
            experiences:
8
            audiences: pageProps.ninetailed?.preview.allAudiences || [],
9
          }),
10
        ]
11
      : []),
12
    ... // Other plugins
13
  ]}
14
>
15
  ... // Children of provider
16
</NinetailedProvider>

1
import type { NinetailedProviderProps } from '@ninetailed/experience.js-next';
2
import type { PropsWithChildren } from 'react';
3
4
import dynamic from 'next/dynamic';
5
import { NinetailedProvider } from '@ninetailed/experience.js-next';
6
7
/**
8
 * Dynamic import of the preview plugin ensures it it not part of a production bundle
9
 */
10
export function getNinetailedProvider(enablePreview: boolean) {
11
  const providerProps: NinetailedProviderProps = {
12
    clientId: process.env.NEXT_PUBLIC_NINETAILED_CLIENT_ID || '',
13
    environment: process.env.NEXT_PUBLIC_NINETAILED_ENVIRONMENT || 'main',
14
    plugins: [
15
      // Any plugins that should always be loaded
16
    ],
17
    // Any other provider config
18
  };
19
20
  if (!enablePreview) {
21
    return function StandardNinetailedProvider({
22
      children,
23
    }: PropsWithChildren) {
24
      return (
25
        <NinetailedProvider {...providerProps}>{children}</NinetailedProvider>
26
      );
27
    };
28
  }
29
30
  return dynamic(() =>
31
    import('@ninetailed/experience.js-plugin-preview').then((mod) => {
32
      return function NinetailedProviderWithPreviewPlugin({
33
        children,
34
      }: PropsWithChildren) {
35
        providerProps.plugins = [
36
          new mod.NinetailedPreviewPlugin({
37
            audiences: ... // your audiences
38
            experiences: ... // your experiences
39
            ... // other config
40
          }),
41
          ...(providerProps.plugins || []),
42
        ];
43
44
        return (
45
          <NinetailedProvider {...providerProps}>{children}</NinetailedProvider>
46
        );
47
      };
48
    })
49
  );
50
}