Next.js 13 App目录下鼠标跟随元素卡顿问题求助

问题出在Next.js 13 App目录的默认组件类型上——App目录的组件默认是服务器组件，而鼠标监听、Framer Motion动画这类依赖浏览器环境的操作，必须放在客户端组件里执行，否则就会因为缺少浏览器运行时上下文导致卡顿。

解决步骤很简单：

• 给包含鼠标跟随逻辑的组件加上'use client'指令，这是App目录里标记客户端组件的关键，只有带这个指令的组件才能访问浏览器API、处理DOM事件和运行动画。
• 把鼠标坐标状态、监听事件、动画元素都封装在这个客户端组件里，不要在服务器组件里直接写这些逻辑。

举个实际实现例子：

首先创建客户端组件MouseFollower.tsx：

'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

export default function MouseFollower() {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePos({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <motion.div
      className="fixed w-8 h-8 rounded-full bg-blue-500 pointer-events-none z-50"
      animate={{
        x: mousePos.x - 16,
        y: mousePos.y - 16,
      }}
      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
    />
  );
}

然后在app/page.tsx里导入使用这个组件：

import MouseFollower from './MouseFollower';

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <h1 className="text-2xl font-bold">测试鼠标跟随</h1>
      <MouseFollower />
    </main>
  );
}

这样调整后，鼠标跟随动画就能在App目录下流畅运行了——本质是把依赖浏览器的逻辑隔离到客户端组件中，符合Next.js 13 App目录的组件模型要求。

内容的提问来源于stack exchange，提问作者Joel Udd