Set up Pendo in Next.js

Question

We're using Next.js 12 with SSR in our project. I've read through the Pendo documentation but I'm still not sure where to place the install snippet in our code, as Next.js doesn't provide an index.html file. We're using layouts however, is the top of the layout a good place to place Pendo?

I was trying to put the snippet as a function inside of the layout component's return, but it apparently doesn't work like this.

Thanks for any help!

What exactly are you trying to add? The common entry point in Next.js is the [custom `_app.js`](https://nextjs.org/docs/advanced-features/custom-app) file. — juliomalves, Nov 12 '22 at 15:27

score 1 · Answer 1 · edited Dec 16 '22 at 15:37

Your _app.tsx should start with something like this and this will work:

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* Pendo Offsite MPA setup code snippet */}
      <script
        dangerouslySetInnerHTML={{
          __html: `
            (function(apiKey){
              ...
              ...
              });
            });`,
        }}
      />

      <sometag />
    </>
  );
}

Paste your Pendo script code as is into the placeholder above as a comment block.

The _app.js file works as index.js, the entry point for the whole application including every sub-page of it.

Set up Pendo in Next.js

1 Answers1