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

The motion GitHub repo had several React 19 issues in 2025, including ref cleanup and Reorder types, which were closed in January 2026. If you see type errors or ref warnings, upgrade the motion package before anything else.

Next.js App Router

'use client';
import { motion } from 'motion/react';

export function Card() {
  return <motion.div whileHover={{ y: -4 }} />;
}

Or, to keep a file as a server component and send less JavaScript:

import * as motion from 'motion/react-client';

export default function Page() {
  return <motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }}>Hello</motion.h1>;
}

Shared layout and page transitions

A popular GitHub issue was "Can't get shared layout animations to work with Next.js 13". The App Router keeps layouts mounted and swaps segments, so exit animations between pages and layoutId across routes need care. Many teams animate inside pages instead, or use the browser View Transitions API.

The old "Can't import the named export Children" error

That error came from Framer Motion 5 with older create-react-app setups. It is a build tool problem, not React 19. Move to a current bundler such as Vite or Next.js.