Using with Next.js

The instructions vary depending on the router you use.

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 theNEXT_PUBLIC_STOREFRONT_API_TOKEN environment variable to your Storefront API token. Follow this guide to find out how to get one.

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>
  );
}

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.

You need to set theNEXT_PUBLIC_STOREFRONT_API_TOKEN environment variable to your Storefront API token. Follow this guide to find out how to get one.

FirmhouseProvider.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>
    </>
  );
}

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.

Products.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>
  );
}

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

app/page.js

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

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

To provide, context value to children we need to wrap the components that needs to use firmhouse object with FirmhouseProvider.