用途：在 Next.js 中实现和调试 Motion for React 动画，包括本地交互、presence、布局、共享元素、滚动、减弱动效与路由集成。核心原则是按需选择动画，用于解释状态或改善交互，而非给每个页面强加动画层；保留既有设计令牌与语义控件，小范围颜色/焦点/悬停过渡可优先用 CSS 避免多余客户端 JavaScript。
使用前先检查：实际组件、路由（App 或 Pages）、包与锁文件、已安装的 Motion API 及构建配置，明确挂载、状态、焦点、滚动与导航的归属，区分本地显现与路由过渡。现代/新代码使用 motion/react；Server Component 中 motion/react-client 入口暴露 motion 元素，但不会让 hooks 或任意回调变成服务端安全代码，交互与 hooks 应放入最小 Client Component，数据获取与密钥留在服务端。已有 framer-motion 项目需检查版本并决定是否迁移，迁移应同步更新包、导入、锁文件、测试与变更 API，不要混用运行时或机械改写命名空间导入。
机制选择：小范围补间/手势用 motion 元素；多个协调子项用 variants 与 stagger；本地移除用 AnimatePresence；布局变化用 layout 或 layout="position"；活动树内共享元素用 layoutId/LayoutGroup；可见性显现用 whileInView；滚动关联值用 useScroll 与 motion values；命令式序列用 useAnimate；对包体积敏感区域用 LazyMotion 与 m；路由/共享视图过渡用框架支持的 ViewTransition。
限制与注意：持久 AnimatePresence 不能控制路由拥有的子树，按 pathname 给包装器加 key 不等于保留离场内容；不要冻结私有路由上下文、拦截所有点击或延迟导航。动画回调不是事务边界，支付、删除、导航确认等结果不得依赖动画是否完成。用 MotionConfig reducedMotion="user" 与 useReducedMotion 处理减弱动效，但仅透明度动画与独立 CSS/视图过渡需各自策略。使用真实按钮/链接/对话框，保留键盘路径、可见焦点与阅读顺序，离场不可见控件不应仍可聚焦或拦截输入。不要服务端渲染关键文本并依赖水合/交叉观察才显示。验证时运行项目既有 typecheck/lint/build，并在浏览器测试快速交互、前进后退、慢数据、中断、减弱动效、键盘与多份共享布局组件，检查控制台/水合错误、滚动恢复与焦点。资料未提供具体安装命令、版本号与价格信息。