I'm using App Router and looking for best practices for implementing a client component structure that is able to use swup page transitions and notify components when page content has changed.
My components like NavBar and children content require knowing the current route so they can have hooks sent to them and can update page content accordingly.
My metadata const needs to be a server component however so looking for the best way to a) structure my server/client component and b) pass current route into components and update when changed
"use client";
export const metadata = {
};
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const [currentRoute, setCurrentRoute] = useState<any | null>(usePathname());
useEffect(() => {
const swup = new Swup({
plugins: [
new SwupScrollPlugin({
animateScroll: {
betweenPages: false,
samePageWithHash: false,
samePage: false,
},
}),
],
});
swup.hooks.on("page:view", (visit) => {
setCurrentRoute(visit.to.url);
console.log("New page loaded:", visit.to.url);
});
}, []);
return (
<html lang="en">
<body className={cx(GeistSans.className, "bg-background antialiased")}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Suspense fallback="...">
<Nav />
</Suspense>
<main
id="swup"
className="transition-fade flex min-h-screen w-full flex-col "
>
{children}
</main>
<Toaster />
<Analytics />
</ThemeProvider>
</body>
</html>
);
}