> For the complete documentation index, see [llms.txt](https://developer.firmhouse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.firmhouse.com/~/changes/v7t3tfYrVBDkXZZGoQGP/sdks/storefront-js-sdk/using-with-next.js.md).

# Using with Next.js

The instructions vary depending on the router you use.

{% tabs %}
{% tab title="Pages Router" %}
Since the Firmhouse JS SDK relies on the `DOMContentLoaded` event for initialization by default, it is important to ensure that we initialize the SDK before this event occurs. Next.js provides us with the `beforeInteractive` strategy for loading scripts before this event.

If you are using Pages Router, you can use the following template to add the Firmhouse JS SDK to your Next.js app.

You need to set the`NEXT_PUBLIC_STOREFRONT_API_TOKEN` environment variable to your Storefront API token. Follow [this guide](/~/changes/v7t3tfYrVBDkXZZGoQGP/sdks/storefront-js-sdk/create-a-storefront-api-token.md) to find out how to get one.

```jsx
import Script from "next/script";

export default function Page() {
  const firmhouseConfig = {
    storefrontToken: process.env.NEXT_PUBLIC_STOREFRONT_API_TOKEN,
  };

  return (
    <main>
      <Script strategy="beforeInteractive">
        {`window.Firmhouse = ${JSON.stringify(firmhouseConfig)}`}
      </Script>
      <Script
        src="https://storefrontjs.firmhouse.com/dist/storefront.js"
        strategy="beforeInteractive" 
      />

      <button
        onClick={() => {
          window.Firmhouse.showCart();
        }}
      >
        Show cart
      </button>
    </main>
  );
}

```

{% endtab %}

{% tab title="App Router" %}
As `DOMContentLoaded` event triggers before third party scripts are injected on Next.js with App router, we need to manually initialize Storefront SDK.

If you are using App Router you can use the following template to add the Firmhouse JS SDK to your Next.js app.&#x20;

You need to set the`NEXT_PUBLIC_STOREFRONT_API_TOKEN` environment variable to your Storefront API token. Follow [this guide](/~/changes/v7t3tfYrVBDkXZZGoQGP/sdks/storefront-js-sdk/create-a-storefront-api-token.md) to find out how to get one.&#x20;

{% code title="FirmhouseProvider.jsx" %}

```jsx
"use client";
import { useState, createContext } from "react";
import Script from "next/script";

export const FirmhouseContext = createContext();
export default function FirmhouseProvider({ children }) {
  const [firmhouse, setFirmhouse] = useState(null);
  const storefrontToken = process.env.NEXT_PUBLIC_STOREFRONT_API_TOKEN;

  return (
    <>
      <Script
        src="https://storefrontjs.firmhouse.com/dist/storefront.js"
        onLoad={() => {
        // Here we initialize Firmhouse manually using initializeFirmhouse function
          window.initializeFirmhouse({
            storefrontToken,
          });
          setFirmhouse(window.Firmhouse);
        }}
      />
      <FirmhouseContext.Provider value={{ firmhouse }}>
        {children}
      </FirmhouseContext.Provider>
    </>
  );
}
```

{% endcode %}

Instead of depending on DOMContentLoaded event, we use `window.initializeFirmhouse` function to set up firmhouse. Then we create a context to pass the Firmhouse object to child components.

{% code title="Products.jsx" %}

```jsx
"use client";
import { useContext} from "react";
import { FirmhouseContext } from "./FirmhouseProvider";

export default function Products() {
  const { firmhouse } = useContext(FirmhouseContext);
  const router = useRouter();
  const pathname = usePathname();

  if (!firmhouse) {
    return (
      <div role="status">
        <span>Loading...</span>
      </div>
    );
  }

  return (
     <button onClick={() => { firmhouse.showCart(); }}>
        Show cart
     </button>
  );
}

```

{% endcode %}

Here, we access firmhouse object from the context we created.

{% code title="app/page.js" %}

```jsx
import FirmhouseProvider from '@/components/FirmhouseProvider'
import Products from '@/components/Products'

export default function Home() {
  return (
    <main>
      <FirmhouseProvider>
        <Products />
      </FirmhouseProvider>
    </main>
  )
}

```

{% endcode %}

To provide, context value to children we need to wrap the components that needs to use firmhouse object with `FirmhouseProvider`.
{% endtab %}
{% endtabs %}