little-balloon-64875
08/27/2025, 12:02 PMconst gb = new GrowthBook({
apiHost: [redacted],
clientKey: [redacted],
decryptionKey: [redacted],
trackingCallback: onExperimentViewed,
});strong-mouse-55694
08/27/2025, 10:24 PMlittle-balloon-64875
09/03/2025, 12:57 PMnavigate: (url) => router.replace(url),
navigateDelay: 0,
This has a type error and so the documentation is not currently valid. Attempted to replace with:
navigate: async (url) => {
await router.replace(url)
return
},
navigateDelay: 0,
But no avail.
This is my full client-side provider:
import { Experiment, Result } from "@growthbook/growthbook";
import {
GrowthBookProvider as GBProvider,
GrowthBook,
} from "@growthbook/growthbook-react";
import { isProduction } from "@helpers/utils";
import router, { useRouter } from "next/router";
import { useEffect } from "react";
import getUUID from "src/utils/user-uuid";
const onExperimentViewed = (
experiment: Experiment<any>,
result: Result<any>,
) => {
const experimentId = experiment.key;
const variationId = result.key;
setTimeout(() => {
// Sometimes the window object is not available, like if
// Segment is not allowed to load because of GDPR or whatever
// In this case we add ?. to avoid attempting to fire this
// if the analytics object is not available
window?.analytics?.track("Experiment Viewed", {
experimentId,
variationId,
});
}, 2000);
};
// Create a client-side GrowthBook instance
const gb = 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,
// Enable easier debugging of feature flags during development
enableDevMode: true,
trackingCallback: onExperimentViewed,
navigate: async (url) => {
await router.replace(url)
return
},
navigateDelay: 0,
});
// Let the GrowthBook instance know when the URL changes so the active
// experiments can update accordingly
function updateGrowthBookURL() {
gb.setURL(window.location.href);
}
const GrowthBookProvider = ({ children }: { children: React.ReactNode }) => {
const router = useRouter();
useEffect(() => {
// Initialize GrowthBook and make sure the attributes are set properly
gb.init({ streaming: false });
// Here we set all of the various attributes that we want to send to GrowthBook to be accessible by experiments
gb.setAttributes({
id: getUUID(),
enableDevMode: !isProduction(),
url: window.location.href,
query: window.location.search,
host: window.location.hostname,
path: window.location.pathname,
});
router.events.on("routeChangeComplete", updateGrowthBookURL);
return () => router.events.off("routeChangeComplete", updateGrowthBookURL);
}, []);
return <GBProvider growthbook={gb}>{children}</GBProvider>;
};
export default GrowthBookProvider;
But when the main URL or the secondary URL are visited, no experiment events are fired.strong-mouse-55694
09/03/2025, 9:33 PMuseRouter import. We'll need to update our docs with this: https://nextjs.org/docs/app/api-reference/functions/use-router#migrating-from-nextrouter
2. Try using debug: true as an option in your GrowthBook instantiation. It'll log much more detail to the console to help you understand where data might not be passed.