Headless Docs
Latest (1.2.3)
Latest (1.2.3)
  • Overview
  • Change Log
  • General Steps
    • Update Prices on Page
    • Update ATC Events
      • Shopify Functions
      • Shopify Plus + Scripts
    • Preview Your Site
    • Lite Mode
  • Next.js Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Next.js - App Directory Configuraiton
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Gatsby Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Pack Digital Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Shopify Hydrogen / Remix
    • Requirements
    • Update loader()
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Examples
    • Custom Events
    • Content Testing
    • Gift With Purchases
  • Reference
    • Providers
      • Provider Props
    • Components
      • Price Components
    • Hooks
      • Price Hooks
      • Offer Hooks
      • Track Hooks
      • Experience Hooks
      • Variation Hooks
      • Cart & Checkout Hooks
Powered by GitBook
On this page
  1. Next.js - App Directory Configuraiton

Add Intelligems Provider

PreviousRequirementsNextTrack Page Views

The will save all relevant data into React Context, which will be available throughout the app as needed.

Example Configuration

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

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <IntelligemsNextClientsideAppDirectoryProvider
         organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
         storefrontApiToken={process.env.NEXT_PUBLIC_STOREFRONT_ACCESS_TOKEN}
         antiFlicker={true}
      >
        ...
      </IntelligemsNextClientsideAppDirectoryProvider>
    </>
  )
}

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

IntelligemsNextProvider
Higher-Order Component