Next.js - Animation works perfectly on static routes but fails on dynamic routes

[Liam-hi]

Hi! I created two static pages (home & about) and a few dynamic routes. My goal is to animate the navigation bar whenever I navigate between the pages. For some reason, Framer Motion works well when I click on the static pages but when I click on the dynamic pages - i get following error: TypeError: retrieveData is undefined.

The typeerror (and back animation) disappears when I remove AnimatePresence from _app.js. Anyone have an idea what the problem is?

app.js

export default function App({ Component, pageProps, router }) {
  return (
  <AnimatePresence mode='wait'><Component {...pageProps} key={router.pathname}/></AnimatePresence>
  );
}

component/navbar.js

export default function Navbar() {

  const router = useRouter();
  return (
    <div className="navigation-bar">
        <motion.p key="nav" exit={{transform: x: 10}} initial={{opacity: 1}}animate={{ y: 20}}  href="/">Home</Link> / <Link  href="/about">About</Link></motion.p>
    </div>
  )
}

slug.js

export default function Details() {
    const router = useRouter(); 
    const retrieveData = data.find(x => x.id == router.query.id);

  return (
    <div>
      <Navbar />
      <h1>Retrieve data</h1>
      <h1>{retrieveData.name}</h1>
      
    </div>

)
}

index.js

export default function Home() {

  const populate = data.map(x =>
    <Link key={x.id} href={`/${x.id}`}><li>
      {x.name}
    </li></Link>
  );

  return (
    <>
       <Navbar />
       { populate }
    </>
  )
}

[hajirasyafi]

I suggest you to place AnimatePresence in Layout component not in App page file, see : https://nextjs.org/docs/basic-features/layouts

components/layout.tsx :

// components/layout.js

export default function Layout({ children }) {
  return (
    <>
      <AnimatePresence >
      <main>{children}</main>
      </AnimatePresence >
    </>
  )
}

app.tsx :

// pages/_app.tsx

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

and in index.tsx file :

// pages/index.tsx

import type { ReactElement } from 'react'
import Layout from '../components/layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
const populate = data.map(x =>
    <Link key={x.id} href={`/${x.id}`}><li>
      {x.name}
    </li></Link>
  );
  return (
    <>
       <Navbar />
       { populate }
    </>
  )
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default Page