In /app, I have a file called template.tsx that handles page transitions:

'use client';

import { motion } from 'framer-motion';

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ ease: 'easeInOut', duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
}

Everything is alright until I go from /blog to /blog/[slug], slug in this case being a blog post. In that case, no transition is triggered and template.tsx seems to be completely ignored. Is there any intended solution for this that I am missing?