Next.js 14本地环境页面刷新时脚本与样式表404问题求助

检查静态资源路径配置 #

• 确认next.config.js中的assetPrefix配置：若应用部署在子路径下（如https://xxx.com/app），需将assetPrefix设为对应子路径（'/app'），避免资源请求路径错误。
• 核对public目录结构：静态资源需放在public根目录或子目录中，引用时务必以/开头（如/styles/main.css，而非styles/main.css），确保相对路径解析正确。

排查服务器路由配置 #

• 若使用自定义服务器（如Express），需保证所有非API请求都回退到Next.js处理，示例代码：

app.get('*', (req, res) => {
  return handle(req, res)
})

• 确认服务器未拦截_next目录请求：Next.js编译后的脚本、样式都存放在_next目录下，服务器需允许该路径的资源访问，不能做拦截限制。

缓存与CDN相关排查 #

• 强制清除浏览器缓存（Ctrl+Shift+R），避免旧缓存的错误路径导致请求失败。
• 若使用CDN，检查缓存规则是否误缓存了_next/static下的动态资源，导致刷新时请求到过期的资源文件。

构建与部署完整性检查 #

• 重新构建时查看日志，确认无资源路径相关警告或错误，比如是否存在缺失的资源文件。
• 检查部署后的服务器文件结构，确保_next/static目录完整上传，且文件权限设置正确（服务器需具备读取这些文件的权限）。

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