Skip to main content
This page does not apply to installs made in 2025 or later of the Depict Shopify apps
Since DPC handles tracking by observing the DOM it can only run in the browser. This requires DPC to be loaded in a way so that it’s not executed on the server when using a framework capable of Server-side rendering (SSR) like Next.js.

​
Initializing DPC in your entry point

In Next.js you can make sure code is only executed client-side by checking typeof window !== "undefined". Since we are importing DPC as a module we can’t do it the with the normal import { DPC } from "depict-ai/dpc" syntax. Instead, we can use dynamic imports. This is also documented by Next.js.
TypeScript
// pages/_app.tsx

import "../styles/globals.css";

/**
 * Initialize Depict Performance Client
 * doc:performance-client
 * Note that this is a client-side only library.
 */
(async function initDepictTracking() {
  if (typeof window !== "undefined") {
    const { DPC } = await import("@depict-ai/dpc");
    new DPC("[MERCHANT_ID]", { market: "se" });
  }
})();

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}