Next.js 14项目路由大小写变更后上线出现404问题求助

核心原因分析 #

你遇到的问题大概率是这两个情况：

1. Git未识别文件名大小写变更：Windows/macOS默认文件系统不区分大小写，直接修改文件名大小写后，Git可能没检测到文件变更，导致部署到大小写敏感的Linux服务器时，还是旧的大写文件名，所以访问小写路由找不到对应文件。
2. 部署平台缓存或未触发全量构建：部分部署平台会缓存旧的构建产物，即使提交了新代码，也可能没有重新生成新的构建包，导致旧路由依然生效。

不需要回滚，按以下步骤解决 #

1. 确认并提交文件名大小写变更

在本地项目根目录执行：

# 手动重命名文件，让Git识别到变更
git mv pages/Charts.js pages/charts.js
# 如果是目录的话：
git mv pages/Charts pages/charts

执行后提交代码：

git add .
git commit -m "fix: 统一路由文件名大小写为小写"
git push

2. 强制触发部署平台全量构建

登录你的部署平台（Vercel、Netlify等），找到对应项目，手动触发一次重新部署，并选择“清除缓存并重新构建”选项，确保平台使用最新的代码生成构建产物。

3. 用重定向兜底（临时解决用户访问旧链接的问题）

如果上述步骤还没生效，或者需要兼容用户已有的旧链接，可以通过配置重定向或中间件处理：

• 方式一：next.config.js配置单个重定向
  在项目根目录的next.config.js中添加：

  module.exports = {
    async redirects() {
      return [
        {
          source: '/Charts',
          destination: '/charts',
          permanent: true, // 301永久重定向，利于SEO
        },
        // 其他需要转换的路由同理添加
      ];
    },
  };
  

• 方式二：中间件全局处理所有路由大小写
  在项目根目录创建middleware.js文件：

  import { NextResponse } from 'next/server';
  
  export function middleware(request) {
    const { pathname } = request.nextUrl;
    // 若路径包含大写字母，自动转小写并重定向
    if (pathname !== pathname.toLowerCase()) {
      const lowerPath = pathname.toLowerCase();
      return NextResponse.redirect(new URL(lowerPath, request.url), { status: 301 });
    }
    return NextResponse.next();
  }
  
  // 匹配所有路由
  export const config = {
    matcher: '/:path*',
  };
  

后续预防措施 #

• 以后修改文件名大小写时，必须用git mv命令，避免Git忽略变更。
• 提交代码前执行git status确认所有文件名变更已被Git追踪。

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