Next.js | App router

Client Side Rendering

Intelligems currently recommends using client-side rendering rather than SSR for Next.js App Router integrations to keep the implementation simple and avoid hydration mismatches.

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 IntelligemsNextClientsideAppDirectoryProvider component stores Intelligems data in React Context so hooks and components can access it throughout your app.

Integration Example

IntelligemsProvider

Create IntelligemsProvider:

"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" // Must be provided
      antiFlicker={true}
    >
      {children}
    </IntelligemsNextClientsideAppDirectoryProvider>
  );
}

RootLayout

Insert IntelligemsProvider inside your RootLayout:

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

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

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

Create a client component

"use client";

import React from "react";
import { useIgTrack } from "@intelligems/headless/next-clientside-app-directory";

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

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

  return null;
}

Render it inside your provider wrapper

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

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

PreviousGatsby

NextNext.js | Pages router

Last updated 4 months ago