Next.js React项目出现Compiled /not-found错误及Framer Motion元素异常

可行解决方案： #

• 检查App Router路由配置
  确认app/not-found.tsx组件是否存在异常逻辑（比如错误拦截正常路由渲染）；同时检查动态路由、路由组的文件夹命名是否符合Next.js规则（如[slug]、(group)这类命名是否正确），避免路由匹配错误触发404页面。

• 定位404资源具体路径
  查看浏览器控制台里404报错的具体资源地址：

  • 如果是静态资源（图片、字体等），确认public文件夹下的文件路径是否与代码中的引用一致（比如代码里写/assets/logo.png，就要确保public/assets/logo.png存在）；
  • 如果是组件或模块资源，检查导入路径是否拼写错误，比如Framer Motion的导入是否为import { motion } from "framer-motion"。

• 清除Next.js缓存
  执行以下操作彻底清除缓存后重启项目：

  1. 删除.next文件夹：Mac/Linux用rm -rf .next，Windows用rd /s /q .next
  2. 重新运行npm run dev
     也可以修改package.json的dev脚本为"dev": "next dev --no-cache"，强制禁用缓存启动。

• 校验依赖版本兼容性
  检查package.json中next和framer-motion的版本是否兼容，部分Framer Motion版本对Next.js的版本有要求。可以执行npm install next@latest framer-motion@latest升级到最新兼容版本，再测试问题是否解决。

• 排查动画组件逻辑
  单独创建一个测试页面，只渲染Intro组件，验证动画是否能正常运行：

  • 如果测试页面正常，说明原页面中存在其他逻辑（比如条件渲染、状态错误）导致动画组件未挂载；
  • 如果测试页面仍失效，检查Intro组件内是否存在钩子使用错误（如useMotionValue、useAnimation）或语法错误，导致组件渲染失败。

内容的提问来源于stack exchange，提问作者Elizza Kaimachiande