I ended up doing the following. I created a file called 'clientApplication' with the following code
"use client";
import { useEffect } from "react";
import { usePathname } from 'next/navigation';
import FadeInElements from './scripts/FadeInElements'
export default function ClientApplication({ children }) {
const pathname = usePathname();
useEffect(() => {
FadeInElements(pathname);
});
return children;
}
Then in my layout.js I wrapped this around my {children}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body data-theme="light">
<ClientApplication>
{children}
</ClientApplication>
</body>
<GoogleAnalytics gaId="G-7GTMYC6GZP" />
<Analytics />
<SpeedInsights />
</html>
)
This seems to be working okay. Do you see any concerns with it?