Next.js生产环境无法加载静态JS文件问题排查求助

我来帮你搞定这个Next.js生产环境里静态JS文件404的问题，结合你的场景，咱们一步步拆解原因和解决方案：

一、先确认Build后的文件是否存在 #

首先你得检查本地执行next build生成的输出目录（Next.js 12及之前是.next，13+ App Router默认是.out），去对应路径看看：

• .out/public/static/sample/test.js
• .out/public/static/charting_library/bundle/dist.js
  这两个文件是不是都存在。

如果文件不存在：

• 检查你的next.config.js有没有配置exclude或其他规则，不小心把这些JS文件排除在build流程之外；
• 看看本地JS文件的权限，是不是因为权限不足导致build时无法复制；
• 确认这些JS文件没有被.gitignore或nextignore忽略，导致build时没被纳入资源列表。

如果文件存在，那问题大概率出在部署环节或者路径引用上。

二、检查部署是否完整 #

很多时候生产环境404是因为部署时没把Build后的所有文件都传上去：

• 如果你用Vercel、Netlify这类平台部署，确认部署配置里有没有把整个输出目录（.next或.out）都包含进去，别漏传了public下的JS文件；
• 如果你自己用服务器部署（比如Nginx），确认你把.out目录里的所有内容都完整上传到了服务器对应目录，别只传了图片文件漏了JS。

三、排查路径与大小写问题 #

本地系统（比如Windows）不区分文件名大小写，但生产环境服务器（大多是Linux）严格区分：

• 检查你代码里写的路径（比如/static/sample/test.js）和实际文件名是不是完全一致，有没有把Test.js写成test.js的情况；
• 确认传递给第三方库的libraryPath: "/static/charting_library/"末尾斜杠是否正确，有没有多写或少写导致拼接后的路径指向错误。

四、代码层面的修复方案 #

为了避免硬编码路径带来的问题，建议用Next.js的环境变量或配置动态获取静态资源路径：

1. 在next.config.js里配置公共运行时变量：

module.exports = {
  publicRuntimeConfig: {
    staticAssetPath: process.env.NEXT_PUBLIC_STATIC_PATH || "/static/",
  },
};

2. 在组件中动态获取路径并传递给第三方库：

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

// 动态拼接路径
const libraryPath = `${publicRuntimeConfig.staticAssetPath}charting_library/`;

// 传递给第三方库
someLibrary.init({
  libraryPath: libraryPath,
  // 其他配置项
});

3. 如果你用Next.js 13+的App Router，也可以直接用环境变量：在.env.production里设置

NEXT_PUBLIC_STATIC_PATH=/static/

然后在组件里直接引用process.env.NEXT_PUBLIC_STATIC_PATH拼接路径。

五、服务器配置排查（自部署场景） #

如果你是自己用Nginx或Apache部署：

• 检查服务器配置里是否允许访问.js文件，有没有设置location规则禁止访问static下的JS；
• 确认服务器根目录指向的是Build后的输出目录根（比如.out或.next的根目录），Next.js会自动处理静态资源的路由。

按照上面的步骤排查，应该能解决你的404问题。

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