Nextjs 15+Framer Motion React 19
Compatibility analysis and integration guide
Compatible
Fully functional in Next.js App Router but requires manual peer dependency overrides for React 19 support in Next.js 15.
Technical Analysis
The primary friction point between Next.js and Framer Motion is the React 19 peer dependency mismatch. Next.js 15 ships with React 19 by default, while the stable version of Framer Motion (v11) still targets React 18. This results in an installation block unless developers use flags like --force or --legacy-peer-deps. Despite the installation warnings, the core animation engine remains stable and functional within the newer React runtime.
From an architectural standpoint, Framer Motion is strictly a Client-side library. Because Next.js uses Server Components by default, you must explicitly declare 'use client' at the top of files containing motion elements. Furthermore, implementing exit animations across route changes in the App Router is more complex than in the Pages Router; because layout.js does not unmount during navigation, AnimatePresence often fails to trigger unless wrapped in a template.js or keyed by the current pathname.
Known Issues (3)
1React 19 Peer Dependency Conflict
Standard installation fails because Framer Motion v11 expects React 18, while Next.js 15 provides React 19.
Add '"overrides": { "framer-motion": { "react": "$react", "react-dom": "$react-dom" } }' to your package.json.
2Exit Animations in App Router
AnimatePresence in layout.js doesn't detect route changes because layouts don't re-render on navigation.
Move AnimatePresence into a template.js file or use a client-side wrapper that uses the usePathname() hook as a key.
3Server Component Errors
Importing 'motion' directly into a Server Component causes a build-time crash.
Extract the motion logic into a separate file marked with 'use client' and import that component instead.
Best Use Cases
- Orchestrating complex UI entry/exit transitions
- Creating layout-aware animations with the 'layout' prop
- Implementing scroll-linked animations using useScroll
- Adding micro-interactions to buttons and navigation elements
Frequently Asked Questions
Share this Badge
Add this compatibility badge to your GitHub README or website.
[](https://devradar.dev/check/nextjs-15-with-framer-motion-react-19)<a href="https://devradar.dev/check/nextjs-15-with-framer-motion-react-19"><img src="https://devradar.dev/api/v1/badge/nextjs-15-with-framer-motion-react-19.svg" alt="Nextjs 15 + Framer Motion React 19" /></a>https://devradar.dev/api/v1/badge/nextjs-15-with-framer-motion-react-19.svgGet Started
Architecture isn't a gamble.
It's a calculation.
Eliminate incompatible technologies and build a defensible tech stack.
No assumptions. No account required. Deterministic validation.