# Add Intelligems Provider

The [IntelligemsNextProvider](https://headless.intelligems.io/version-1.0.0-beta/reference/providers/next.js) [Higher-Order Component](https://legacy.reactjs.org/docs/higher-order-components.html) will save all relevant data into React Context, which will be available throughout the app as needed.

### Example Configuration

<pre class="language-tsx"><code class="lang-tsx">import { IntelligemsNextClientsideProvider } from "@intelligems/headless/next-clientside"

<strong>export default function MyApp({ Component, pageProps }: AppProps) {
</strong>  return (
    &#x3C;>
      &#x3C;IntelligemsNextClientsideProvider
         organizationId={process.env.NEXT_PUBLIC_INTELLIGEMS_ORG_ID}
         storefrontApiToken={process.env.NEXT_PUBLIC_STOREFRONT_ACCESS_TOKEN}
         antiFlicker={true}
      >
        ...
      &#x3C;/IntelligemsNextClientsideProvider>
    &#x3C;/>
  )
}
</code></pre>

{% hint style="warning" %}
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']`
{% endhint %}