Next.js 13迁移至app目录并启用experimental flag后Framer Motion报错求助

核心原因 #

Next.js 13的App Router（app目录）默认采用React Server Components（RSC），而React.createContext是客户端专属API，无法在服务器组件环境中运行。

在pages目录开发时，所有组件默认都是客户端组件，自然能正常调用Framer Motion依赖的客户端API；但切换到app目录并启用实验性App Router特性后，组件默认是服务器组件，直接使用Framer Motion就会触发React.createContext is not a function错误——因为服务器环境不存在这个API。

解决步骤 #

• 标记客户端组件：在所有使用Framer Motion的组件顶部添加'use client';指令，强制组件在客户端运行，这样就能访问createContext等客户端API：

  'use client';
  import { motion } from 'framer-motion';
  
  export default function AnimatedComponent() {
    return <motion.div animate={{ x: 100 }}>Hello</motion.div>;
  }
  

• 升级Framer Motion版本：确保你使用的Framer Motion是支持Next.js 13 App Router的稳定版本，早期版本可能存在兼容性问题，建议升级到最新版。
• 避免在服务器组件中直接调用Framer Motion：如果需要在服务器组件中展示动画内容，应该将动画部分封装为独立的客户端组件，再在服务器组件中引入。

内容的提问来源于stack exchange，提问作者Mohammed Bekele