Animated Page Transition Tester

// _app.tsx
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { AnimatePresence, motion } from 'framer-motion';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  
  // Set up your page transition variants
  const pageVariants = {
    initial: {
    opacity: 0
},
    animate: {
    opacity: 1
},
    exit: {
    opacity: 0
}
  };
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={router.asPath}
        initial="initial"
        animate="animate"
        exit="exit"
        variants={pageVariants}
        transition={{ duration: 0.5 }}
      >
        <Component {...pageProps} />
      </motion.div>
    </AnimatePresence>
  );
}

export default MyApp;

// Usage example in each page:
// pages/index.tsx
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to our website!</p>
      <Link href="/about">About Us</Link>
    </div>
  );
}

// pages/about.tsx
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Learn more about our company.</p>
      <Link href="/">Go Home</Link>
    </div>
  );
}