Next.js

Here is a way to load the snippet with Next.js

// _app.js

import Script from "next/script";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        id="jimo-widget"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          window.jimo = [];
          (function(j,i,m,o) {
              var s = document.createElement("script");
      
              s.type = "text/javascript";
              s.async = true;
              s.src = "https://undercity.usejimo.com/jimo-invader.js";
              j['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT";
              document.getElementsByTagName("head")[0].appendChild(s);
          })(window);`,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

Additional configuration

To make sure Jimo works properly in your Next app, we recommend adding an extra useEffect so that Jimo is fully aware of url changing in your app.

In fact, Next.js Router doesn't fire very well event related to navigation. Since you might publish content on Jimo that should be only available for a specific URL, we recommend adding the extra code bellow.

  // _app.js

import { useRouter } from "next/router";
import Script from "next/script";
import { useEffect } from "react";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {

    // From here
    const router = useRouter();

    useEffect(() => {
        const handleHashChange = (url, { shallow }) => {
            window.jimo.push(["do", "boosted:hash-change"]);
        };

        router.events.on("hashChangeComplete", handleHashChange);
        return () => {
            router.events.off("hashChangeComplete", handleHashChange);
        };
    }, []);
    // Until there
    
  return (
    <>
      <Script
        id="jimo-widget"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          window.jimo = [];
          (function(j,i,m,o) {
              var s = document.createElement("script");
      
              s.type = "text/javascript";
              s.async = true;
              s.src = "https://undercity.usejimo.com/jimo-invader.js";
              j['JIMO_PROJECT_ID'] = "ID_OF_YOUR_PROJECT";
              document.getElementsByTagName("head")[0].appendChild(s);
          })(window);`,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}