# Does Framer Motion work with React 19 and Next.js?

> Yes. Current versions of Motion list React 18 and 19 as supported peer dependencies (version 14.10 in November 2026), and Motion supports both the Next.js Pages and App Routers. In the App Router, add "use client" to files that use motion components, or import from "motion/react-client" in server components. Most React 19 errors go away after upgrading.

Updated November 2026. Source: https://www.exodeui.com/questions/framer-motion-react-19-nextjs/

## Key takeaways

- motion 14.x peer dependencies: React ^18 || ^19
- Upgrade first; several React 19 issues were fixed in early 2026
- App Router: "use client" or motion/react-client
- Page exit transitions are harder in the App Router
- Old create-react-app setups caused import errors in v5

## Frequently asked questions

### Can motion components be server components?

They run in the browser. motion/react-client lets you use them from a server component file without marking it use client.

### Why do I get a hydration warning?

Usually because initial styles differ between server and client. Use initial values that match the server render, or initial={false}.

### Does Motion support React Server Components fully?

Animation runs on the client. Motion provides the react-client import to fit into RSC apps.

### Is there a lighter way to load Motion?

Yes. LazyMotion with the m component loads features on demand.

## Related

- [Framer Motion vs Motion](https://www.exodeui.com/questions/framer-motion-vs-motion)
- [Interactive animations with Next.js SSR](https://www.exodeui.com/learn/interactive-animations-nextjs-ssr)
- [View Transitions API](https://www.exodeui.com/learn/view-transitions-api)
- [AnimatePresence exit not working](https://www.exodeui.com/questions/animatepresence-exit-animation-not-working)