https://www.growthbook.io/ logo
Join Slack
Powered by
Hello, My application is Nextjs.js application and...
# ask-questions
b
Hello, My application is Nextjs.js application and is using app router approach. I did all the growtbook setup as in the example nextjs application. But when I upload the application to cloudflare pages, getFeatures returns empty object and even tough I have features on client side. And it is not triggering trackingCallback callback. Do you know the issue and solution for this?
f
can you share some of the code? can you see a network request to fetch the features? are there features in that SDK payload?
b
Copy code
export const runtime = 'edge';

export default async function RootLayout({
                                             children,
                                         }: Readonly<{
    children: React.ReactNode;
}>) {
    configureServerSideGrowthBook();

    // Create and initialize a GrowthBook instance
    const gb = new GrowthBook({
        apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
        clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
    });

    await gb.init({timeout: 1000});

    const cookie = await cookies();

    // Set targeting attributes for the user
    // TODO: get from cookies/headers/db
    await gb.setAttributes({
        id: cookie.get(GB_UUID_COOKIE)?.value || "",
    });

    // Get the payload to hydrate the client-side GrowthBook instance
    // 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();
    return (
        <html lang="en">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <meta name="next-size-adjust" content=""/>
            <link
                href="/images/favicon-32x32.png"
                rel="shortcut icon" type="image/x-icon"/>

        </head>
        <body>
        <div className="flex flex-col min-h-screen">
            <ClientApp payload={payload}>
                {children}
            </ClientApp>
            <GrowthBookTracking data={trackingData}/>
            <Footer/>
        </div>
        </body>
        </html>
    );
}
this is layout.tsx file
when I run this under edge runtime
payload is always empty. So when I pass empty payload to the client side, it initialize with empty payload, naturally there is no tracking callback because there is no official fatureflag in core perspective
But I don't understand why it return empty
by the way I just run Growthbook Next.js App Router 
hybrite
Example on Cloudflare Pages.
f
@future-teacher-7046 do you know?
17 Views
Open in Slack
PreviousNext
Powered by