Next.js应用_buildmanifest.js等404：疑因文件路径大小写不匹配

问题根源 #

Windows 文件系统不区分大小写，本地开发时不会暴露问题，但构建生成的静态资源哈希目录、文件名是大小写混合格式，而请求时路径被转为全小写；Linux（包括Digital Ocean服务器）严格区分路径大小写，导致实际文件与请求路径不匹配，触发404错误。

解决方案 #

1. 自定义Webpack配置，强制输出小写路径 #

修改项目根目录的next.config.js，添加Webpack配置规则，将静态资源的哈希目录、文件名统一转为小写：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 静态资源文件输出路径转小写
    config.output.assetModuleFilename = 'static/[hash:lower]/[name:lower][ext]';
    // Chunk文件输出路径转小写
    config.output.chunkFilename = 'static/[hash:lower]/[name:lower].js';
    // Runtime文件输出路径转小写
    config.output.runtimeChunkFilename = 'static/[hash:lower]/runtime-[name:lower].js';

    // 处理CSS文件输出路径
    config.plugins.forEach(plugin => {
      if (plugin.constructor.name === 'MiniCssExtractPlugin') {
        plugin.options.filename = 'static/[hash:lower]/[name:lower].css';
        plugin.options.chunkFilename = 'static/[hash:lower]/[name:lower].chunk.css';
      }
    });

    return config;
  }
};

module.exports = nextConfig;

修改后重新执行npm run build和npm start，检查.next/static目录下的文件路径是否已转为全小写，同时验证请求路径是否匹配。

2. 排查第三方插件/中间件的路径修改 #

检查项目中是否存在强制转换URL大小写的中间件或第三方插件（比如路由处理插件），这类工具可能会把/_next/static目录的请求路径转为小写，导致与实际文件路径不匹配。如果有，调整规则排除/_next/static目录的大小写转换，或暂时移除相关插件测试。

3. 升级Next.js版本 #

Next.js 12.3.4可能存在静态资源路径处理的相关bug，尝试升级到12.x分支的最新稳定版（如12.3.5），或根据项目兼容性考虑升级到13.x版本（注意：升级到13.x建议同步升级React到18.x以获得更好的兼容性）。升级后重新构建部署，验证问题是否解决。

4. 检查代码中的大小写引用问题 #

虽然问题出在Next.js自动生成的文件上，但仍需排查项目中是否存在大小写不一致的文件引用（比如import语句、路由跳转路径），这类问题可能间接导致静态资源路径处理异常。确保所有文件引用的大小写与实际文件路径完全一致。

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