Add Intelligems Provider

The IntelligemsNextClientsideAppDirectoryProvider component stores Intelligems data in React Context so hooks and components can access it throughout your app.

Example Configuration (App Router)

Create a client-only provider wrapper (for example, app/intelligems-provider.tsx):

REQUIRED: The activeCurrencyCode prop is required and must be provided.

"use client";

import { IntelligemsNextClientsideAppDirectoryProvider } from "@intelligems/headless/next-clientside-app-directory";

export function IntelligemsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <IntelligemsNextClientsideAppDirectoryProvider
      organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
      storefrontApiToken={
        process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
      }
      activeCurrencyCode="USD"
      antiFlicker={true}
    >
      {children}
    </IntelligemsNextClientsideAppDirectoryProvider>
  );
}

Then wrap your root layout:

import { IntelligemsProvider } from "./intelligems-provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <IntelligemsProvider>{children}</IntelligemsProvider>
      </body>
    </html>
  );
}

ESM Errors

Depending on the setup of your site, you may encounter an ERR_REQUIRE_ESM error when using our package. Try adding the snippet below to next.config.js and/or reach out to support.

transpilePackages: ['@intelligems/headless']

PreviousRequirements NextTrack Page Views

Last updated 12 days ago

hashtagExample Configuration (App Router)

Example Configuration (App Router)