I am using NextJS 13.4 (App Router) and I want to use Framer Motion for my animations. In earlier versions of Next you could wrap the entire app with <AnimatePresence> in the App component like this:
import { AnimatePresence } from 'framer-motion'
import { AppProps, useRouter } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter()
const pageKey = router.asPath
return (
<AnimatePresence initial={false}>
<Component key={pageKey} {...pageProps} />
</AnimatePresence>
)
}
I am trying to achieve the same result with NextJs' App router like this, but it doesn't work:
export default function RootLayout({ children}: { children: React.ReactNode}) {
return (
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<AnimatePresence>
{children}
</AnimatePresence>
<div className="container__small">
<Footer />
</div>
</body>
</html>
);
}
How do I wrap my entire component with Framer Motion AnimatePresence?