Next.js | Pages router

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']

Environment Variables

Add the following to your .env file:

NEXT_PUBLIC_INTELLIGEMS_ORG_ID=<Intelligems-ID>
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=<Storefront-API-Token>

Provider Integration

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

Integration Example

import { IntelligemsNextClientsideProvider } from "@intelligems/headless/next-clientside";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <IntelligemsNextClientsideProvider
        organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
        storefrontApiToken={
          process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
        }
        activeCurrencyCode="USD" // Must be provided
        antiFlicker={true}
      >
        ...
      </IntelligemsNextClientsideProvider>
    </>
  );
}

Page Views Tracking

useIgTrack is a client-side hook tracking page views.

To provide accurate analytics ensure it is configured with valid parameters:

• cartOrCheckoutToken

• currency

• country

import React from "react";

import {
  IntelligemsNextClientsideProvider,
  useIgTrack,
} from "@intelligems/headless/next-clientside";

const IntelligemsTracker = () => {
  const { checkout } = React.useContext(StoreContext);

  useIgTrack({
    cartOrCheckoutToken: checkout?.id,
    currency: checkout?.totalTaxV2?.currencyCode,
    country: "US",
  });

  return null;
};

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <IntelligemsNextClientsideProvider
      organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
      storefrontApiToken={
        process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
      }
      antiFlicker={true}
    >
      <StoreProvider>
        <IntelligemsTracker />
        <Component {...pageProps} />
      </StoreProvider>
    </IntelligemsNextClientsideProvider>
  );
}