Why imperatively call `page()`? about rudder-analytics-next

[erikvorhes]

I agree, this approach doesn't really recognize how a Next.js app works. Instead I'd recommend handling .page() in _app.js/_app.tsx, like @nandorojo suggests. Something like this works for me (using TypeScript):

import { useEffect, useState } from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';

const initializeRudderStack = async (
  setDidInitRudderStack: (val: boolean) => void
) => {
  window.rudderanalytics = await import('rudder-sdk-js');
  window.rudderanalytics.load(
    '<WRITE_KEY>',
    '<DATA_PLANE_URL>',
    {
      integrations: { All: true },
    }
  );

  window.rudderanalytics.ready(() => {
    setDidInitRudderStack(true);
  });
};

const MyApp = ({ Component, pageProps }: AppProps) => {
  const [didInitRudderStack, setDidInitRudderStack] = useState(false);
  const router = useRouter();

  useEffect(() => {
    initializeRudderStack(setDidInitRudderStack);
  }, []);

  // log initial page view
  useEffect(() => {
    if (didInitRudderStack) {
      window.rudderanalytics?.page();
    }
  }, [didInitRudderStack]);

  // log subsequent page views
  useEffect(() => {
    const handleRouteChangeComplete = () => {
      window.rudderanalytics?.page();
    };

    router.events.on('routeChangeComplete', handleRouteChangeComplete);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
    };
  }, [router]);

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

export default MyApp;