Next.js 13加载自定义脚本出现404错误的解决方法

1. 修正文件名与引用路径的匹配问题 #

你明确说明将脚本保存为script.js，但在layout.js的Script组件中使用的路径是/scripts/scroll.js，文件名不一致是导致404的直接原因。请二选一调整：

• 把public/scripts下的script.js重命名为scroll.js；
• 或者修改Script组件的src属性为/scripts/script.js。

2. 确认public目录的位置与结构 #

Next.js 13要求public目录必须放在项目根目录下，而非app或其他子目录中。正确的目录结构应为：

你的项目根目录/
├── public/
│   └── scripts/
│       └── scroll.js （或script.js）
├── app/
│   └── layout.js
└── ...其他项目文件

3. 检查文件名大小写 #

若你的开发环境是Linux或macOS，文件名区分大小写。比如实际文件名是Scroll.js，但引用时写scroll.js会触发404，请确保两者大小写完全一致。

4. 清理缓存并重启开发服务器 #

Next.js开发服务器可能缓存旧的文件映射，执行以下操作修复：

• 停止当前开发服务器（按Ctrl+C）；
• 删除项目根目录下的.next隐藏目录；
• 重新启动服务器：npm run dev 或 yarn dev。

额外优化建议 #

由于你的组件均为Server Components，使用IntersectionObserver的脚本需确保DOM元素已渲染完成。可给Script组件添加执行策略属性，确保脚本在合适时机运行：

<Script src="/scripts/scroll.js" strategy="afterInteractive" />

内容的提问来源于stack exchange，提问作者Big boy