https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
h

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.
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;
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}
in
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.
Dev Tools shows nothing.
4 Views