Page Transition In NextJS 14 App Router Using Framer Motion

Animating the Template with Framer Motion
To add animations, we'll create a Template component. It will automatically produce beautiful page transitions after each router change or when the page loads. Create a new file called template.tsx.

"use client";
import React from "react";
import { motion } from "framer-motion";

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

Final Thoughts
By combining Next.js with Framer Motion, we can create a professional and dynamic web layout that enhances user experience. This approach not only ensures smooth animations but also provides a structured and maintainable codebase.