1

What is the way to initialise libraries like LogRocket after the new NextJS 13 came out with the experimental app directory? For example, I used to initialise it using the useEffect script inside the _app.tsx file like so:

import LogRocket from 'logrocket';

useEffect(() => {
  if (process.env.NODE_ENV === 'production') {
    LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID);
}, []);

Now, NextJS complains the useEffect hook can not be called on a server-side component, as I am trying to run this code from the layout.tsx. What is the new way to inject scripts like this globally?

Shared User
  • 105
  • 9
  • 1
    Check my question and the respective answer, it works perfectly fine. https://stackoverflow.com/questions/75951134/next-js-app-folder-is-there-some-entry-point-a-direct-replacement-for-app-t – sandrooco May 08 '23 at 11:48

1 Answers1

0

Hope you have installed the library using npm install logrocket.

You only need to return it for all the pages using return statement.

 useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID);
    }
  }, []);

  return <Component {...pageProps} />;

Make sure the useEffect should be inside the function. This will work for you.

Shubham Raturi
  • 116
  • 7
  • Add init to all pages? What a bad advise Xd. Any further solutions like use `use strict` for the `layout` page, at least? – Shared User May 07 '23 at 10:08