Hey guys I can t seem to get anything working at all using N GrowthBook Users #ask-questions

Hey guys, I can't seem to get anything working at ...

hundreds-cat-19984

01/29/2024, 7:15 PM

Hey guys, I can't seem to get anything working at all using Next.JS with either server components or client components. I've been tinkering for 2 days to no avail. I'm fairly sure it's something relating to the loading features and when that happens. I'm testing locally, with

npm run dev

and and using a

useEffect()

with

growthbook.loadFeatures()

- Test Connection on the web portal says I'm connected. The FullAPIEndpoint shows my feature with default of on. I've tried just about every method in the docs to test but still nothing ever works.

useFeatureIsOn("test")

always evaluates to false, no matter what I try.

hundreds-cat-19984

01/29/2024, 7:19 PM

Copy code

"use client";

import {
  GrowthBook,
  GrowthBookProvider,
  useFeatureIsOn,
} from "@growthbook/growthbook-react";
import { useEffect } from "react";

const growthbook = new GrowthBook({
  apiHost: "<https://cdn.growthbook.io>",
  clientKey: "sdk-xxxxxxxx",
  enableDevMode: true,
  trackingCallback: (experiment, result) => {
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key,
    });
  },
});

const PageTitle = () => {
  const enabled = useFeatureIsOn("test");
  if (!enabled) return null;
  return <h1 className="text-4xl">This is my page title!</h1>;
};

export const PageTitleWithGB = () => {
  useEffect(() => {
    growthbook.loadFeatures();
  }, []);

  return (
    <GrowthBookProvider growthbook={growthbook}>
      <PageTitle />
    </GrowthBookProvider>
  );
};

export default PageTitleWithGB;

hundreds-cat-19984

01/29/2024, 7:24 PM

If I call this in my

NavBar.tsx

which is in turn called in

layout.tsx

- I get null. On another note, I had hoped I could wrap

{children}

RootLayout()

in the

GrowthBookProvider

and create the instance there a single time, then be able to put the

useEffect

in the

RootLayout()

function too.. then just evaluate flags anywhere in my app.. should that work? I removed

Metadata

from layout.tsx to make it a client function to test this, to no avail.

hundreds-cat-19984

01/29/2024, 9:01 PM

Dev Tools shows nothing.

26 Views

Open in Slack

Previous Next