Have the next example use growthbook tracking

Author: tzjames

next-js/README.md

@@ -14,7 +14,7 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:8000](http://localhost:8000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 

next-js/package-lock.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 8000",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 8000",
     "lint": "next lint"
   },
   "dependencies": {
-    "@growthbook/growthbook": "^1.0.0",
-    "@growthbook/growthbook-react": "^1.0.0",
+    "@growthbook/growthbook": "^1.6.5",
+    "@growthbook/growthbook-react": "^1.6.5",
     "js-cookie": "^3.0.5",
     "next": "14.2.2",
     "react": "^18",

next-js/package.json

@@ -1,30 +1,27 @@
 "use client";
-import { onExperimentView } from "@/lib/GrowthBookTracking";
 import ClientComponent from "./ClientComponent";
 import { GrowthBook, GrowthBookPayload } from "@growthbook/growthbook";
 import { GrowthBookProvider } from "@growthbook/growthbook-react";
 import { useMemo } from "react";
-import { GB_UUID_COOKIE } from "@/middleware";
-import Cookies from "js-cookie";
+import { growthbookManagedWarehouseClientPlugins } from "@/lib/growthbookManagedWarehouse";
 
 export default function ClientApp({ payload }: { payload: GrowthBookPayload }) {
+  const isBrowser = typeof window !== "undefined";
+
   // Create a singleton GrowthBook instance for this page
   const gb = useMemo(
     () =>
       new GrowthBook({
         apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
         clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
         decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
-        trackingCallback: onExperimentView,
-        attributes: {
-          id: Cookies.get(GB_UUID_COOKIE),
-        },
+        plugins: growthbookManagedWarehouseClientPlugins(isBrowser),
       }).initSync({
         payload,
         // Optional, enable streaming updates
         streaming: true,
       }),
-    [payload]
+    [payload, isBrowser]
   );
 
   return (

next-js/src/app/client-optimized/ClientApp.tsx

@@ -1,6 +1,7 @@
 import { configureServerSideGrowthBook } from "@/lib/growthbookServer";
 import ClientApp from "./ClientApp";
 import { GrowthBook } from "@growthbook/growthbook";
+import { growthbookManagedWarehouseServerPlugins } from "@/lib/growthbookManagedWarehouse";
 
 export default async function PrerenderedClientPage() {
   // Helper to configure cache for next.js
@@ -11,6 +12,7 @@ export default async function PrerenderedClientPage() {
     apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
     clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
     decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
+    plugins: growthbookManagedWarehouseServerPlugins(),
   });
   await gb.init({ timeout: 1000 });
 

next-js/src/app/client-optimized/page.tsx

@@ -1,38 +1,28 @@
 "use client";
-import Cookies from "js-cookie";
 import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";
 import { useEffect, useMemo } from "react";
 import ClientComponent from "./ClientComponent";
-import { GB_UUID_COOKIE } from "@/middleware";
-import { onExperimentView } from "@/lib/GrowthBookTracking";
+import { growthbookManagedWarehouseClientPlugins } from "@/lib/growthbookManagedWarehouse";
 
 export default function ClientPage() {
+  const isBrowser = typeof window !== "undefined";
+
   // Create a single memoized GrowthBook instance for the client
   const gb = useMemo(() => {
     return new GrowthBook({
       apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
       clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
       decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
-      trackingCallback: onExperimentView,
+      plugins: growthbookManagedWarehouseClientPlugins(isBrowser),
     });
-  }, []);
+  }, [isBrowser]);
 
   useEffect(() => {
     // Fetch feature payload from GrowthBook
     gb.init({
       // Optional, enable streaming updates
       streaming: true,
     });
-
-    // Set targeting attributes for the user
-    let uuid = Cookies.get(GB_UUID_COOKIE);
-    if (!uuid) {
-      uuid = Math.random().toString(36).substring(2);
-      Cookies.set(GB_UUID_COOKIE, uuid);
-    }
-    gb.setAttributes({
-      id: uuid,
-    });
   }, [gb]);
 
   return (

next-js/src/app/client/page.tsx

@@ -1,32 +1,29 @@
 "use client";
-import { onExperimentView } from "@/lib/GrowthBookTracking";
 import { GrowthBookPayload } from "@growthbook/growthbook";
 import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";
 import { PropsWithChildren, useMemo } from "react";
-import { GB_UUID_COOKIE } from "@/middleware";
-import Cookies from "js-cookie";
+import { growthbookManagedWarehouseClientPlugins } from "@/lib/growthbookManagedWarehouse";
 
 export default function ClientApp({
   payload,
   children,
 }: PropsWithChildren<{ payload: GrowthBookPayload }>) {
+  const isBrowser = typeof window !== "undefined";
+
   // Create a singleton GrowthBook instance for this page
   const gb = useMemo(
     () =>
       new GrowthBook({
         apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
         clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
         decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
-        trackingCallback: onExperimentView,
-        attributes: {
-          id: Cookies.get(GB_UUID_COOKIE),
-        },
+        plugins: growthbookManagedWarehouseClientPlugins(isBrowser),
       }).initSync({
         payload,
         // Optional, enable streaming updates
         streaming: true,
       }),
-    [payload]
+    [payload, isBrowser]
   );
 
   return <GrowthBookProvider growthbook={gb}>{children}</GrowthBookProvider>;

next-js/src/app/hybrid/ClientApp.tsx

@@ -4,7 +4,7 @@ import ClientApp from "./ClientApp";
 import RevalidateMessage from "@/app/revalidate/RevalidateMessage";
 import { GrowthBook } from "@growthbook/growthbook";
 import { configureServerSideGrowthBook } from "@/lib/growthbookServer";
-import { GrowthBookTracking } from "@/lib/GrowthBookTracking";
+import { growthbookManagedWarehouseServerPlugins } from "@/lib/growthbookManagedWarehouse";
 import ClientComponent from "./ClientComponent";
 
 export default async function ServerCombo() {
@@ -16,6 +16,7 @@ export default async function ServerCombo() {
     apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
     clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
     decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
+    plugins: growthbookManagedWarehouseServerPlugins(),
   });
   await gb.init({ timeout: 1000 });
 
@@ -32,10 +33,6 @@ export default async function ServerCombo() {
   // We need the decrypted payload so the initial client-render can be synchronous
   const payload = gb.getDecryptedPayload();
 
-  // If the above features ran any experiments, get the tracking call data
-  // This is passed into the <GrowthBookTracking> client component below
-  const trackingData = gb.getDeferredTrackingCalls();
-
   // Cleanup your GrowthBook instance
   gb.destroy();
 
@@ -62,8 +59,6 @@ export default async function ServerCombo() {
       </ClientApp>
 
       <RevalidateMessage />
-
-      <GrowthBookTracking data={trackingData} />
     </div>
   );
 }

next-js/src/app/hybrid/page.tsx

@@ -89,11 +89,19 @@ export default function Home() {
           from an SDK Webhook in GrowthBook.
         </p>
         <p>
-          If an experiment is run server-side, data about which variation the
-          user saw is sent to the client where an analytics event is triggered
-          (or console.log in these examples). This happens via the{" "}
-          <code>GrowthBookTracking</code> client component defined in{" "}
-          <code>src/lib/GrowthBookTracking</code>.
+          Experiment views and feature evaluations are sent to GrowthBook
+          Managed Warehouse using the{" "}
+          <code>growthbookTrackingPlugin</code> and{" "}
+          <code>autoAttributesPlugin</code> (client only) from{" "}
+          <code>@growthbook/growthbook/plugins</code>. See the{" "}
+          <a
+            href="https://docs.growthbook.io/app/managed-warehouse#client-side-javascript--react"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Managed Warehouse docs
+          </a>
+          .
         </p>
       </section>
     </main>

next-js/src/app/page.tsx

@@ -2,8 +2,8 @@ import { cookies } from "next/headers";
 import { GB_UUID_COOKIE } from "@/middleware";
 import RevalidateMessage from "@/app/revalidate/RevalidateMessage";
 import { GrowthBook } from "@growthbook/growthbook";
-import { GrowthBookTracking } from "@/lib/GrowthBookTracking";
 import { configureServerSideGrowthBook } from "@/lib/growthbookServer";
+import { growthbookManagedWarehouseServerPlugins } from "@/lib/growthbookManagedWarehouse";
 
 export default async function ServerDynamic() {
   // Helper to configure cache for next.js
@@ -14,6 +14,7 @@ export default async function ServerDynamic() {
     apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
     clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
     decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
+    plugins: growthbookManagedWarehouseServerPlugins(),
   });
   await gb.init({ timeout: 1000 });
 
@@ -26,10 +27,6 @@ export default async function ServerDynamic() {
   const feature1Enabled = gb.isOn("feature1");
   const feature2Value = gb.getFeatureValue("feature2", "fallback");
 
-  // If the above features ran any experiments, get the tracking call data
-  // This is passed into the <GrowthBookTracking> client component below
-  const trackingData = gb.getDeferredTrackingCalls();
-
   // Cleanup
   gb.destroy();
 
@@ -50,8 +47,6 @@ export default async function ServerDynamic() {
       </ul>
 
       <RevalidateMessage />
-
-      <GrowthBookTracking data={trackingData} />
     </div>
   );
 }