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 Steps

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 { 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_STOREFRONT_ACCESS_TOKEN}
         antiFlicker={true}
      >
        ...
      </IntelligemsNextClientsideProvider>
    </>
  )
}

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