Next.js not working with Analytics

[eddyhdzg-solarx]

Does anyone knows how to use getAnalytics + useAnalytics with Next.js?

The error I'm getting is

ReferenceError: window is not defined

[eddyhdzg]

Temporarily solve it with this solution from https://github.com/vercel/next.js/discussions/35773 , but I'm looking for a better way to do it.

import { useState, useEffect } from "react";
import {
  AnalyticsProvider as ReactFireAnalyticsProvider,
  useFirebaseApp,
} from "reactfire";
import { getAnalytics } from "firebase/analytics";
import { CenterLoader } from "components";

function withAnalyticsProvider(
  WrappedComponent: React.ComponentType<React.PropsWithChildren>
) {
  return (props: React.PropsWithChildren) => {
    const [isSSR, setIsSSR] = useState(true);

    useEffect(() => {
      setIsSSR(false);
    }, []);

    if (isSSR) return <CenterLoader />;
    return <WrappedComponent {...props} />;
  };
}

function AnalyticsProvider({ children }: React.PropsWithChildren) {
  const firebaseApp = useFirebaseApp();
  const analytics = getAnalytics(firebaseApp);

  return (
    <ReactFireAnalyticsProvider sdk={analytics}>
      {children}
    </ReactFireAnalyticsProvider>
  );
}

export default withAnalyticsProvider(AnalyticsProvider);