-1

could someone please tell me how to convert this code into Next.js 13? I am attempting to create a page animation using Framermotion, but I am struggling to figure out the process in Next 13.

// _app.js
    
import { AnimatePresence } from 'framer-motion'
    
function MyApp({ Component, pageProps, router }) {
    return (
        <AnimatePresence mode="wait" initial={false}>
          <Component {...pageProps} key={router.asPath} />
        </AnimatePresence>
    );
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Tabim
  • 1
  • 3

1 Answers1

0
layout.tsx:

import { usePathname } from "next/navigation";

 const pathname = usePathname();
  return (
    <html lang="en" className={roboto.className}>
      <body className="">
        <AnimatePresence mode="wait" initial={false}>
          <motion.div key={pathname}>
            {children}
          </motion.div>
        </AnimatePresence>
      </body>
    </html>

this is how im using with 13 in layout.tsx

Koran
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '23 at 16:07