Next.js构建后路由与Link失效，报TypeError错误求助

问题描述 #

开发环境下通过useRouter.push或<Link>组件跳转路由完全正常，但执行生产构建后，访问路由时触发客户端异常：Application error: a client-side exception has occurred (see the browser console for more information)，控制台核心报错为TypeError: Cannot read properties of null (reading '1')。当前使用next@13.4.19，尝试升级、降级版本均无法解决问题。

排查与解决步骤 #

1. 开启生产环境源码映射定位具体错误 #

生产环境代码默认会被压缩混淆，导致堆栈信息无法指向具体业务代码。在next.config.js中添加配置生成源码映射：

/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
  // 保留原有其他配置
};

module.exports = nextConfig;

重新执行npm run build并部署，此时浏览器控制台会显示错误对应的具体文件、行号和未混淆的函数名，能直接定位到触发null[1]的代码位置。

2. 重点检查路由中间件（middleware.ts） #

如果项目使用了自定义路由中间件，大概率是正则匹配逻辑未做空值判断。例如中间件中出现类似以下代码：

const match = /^\/finance\/(.*)$/.exec(request.nextUrl.pathname);
const segment = match[1]; // 当路径不匹配正则时，match为null，此处直接读取[1]会报错

解决方式：添加空值校验后再处理：

const match = /^\/finance\/(.*)$/.exec(request.nextUrl.pathname);
if (!match) return NextResponse.next(); // 或其他符合业务逻辑的兜底处理
const segment = match[1];

3. 排查第三方路由相关依赖 #

若使用了next-intl、next-auth等涉及路由处理的第三方库，需检查：

• 库版本与next@13.4.19的兼容性，对照官方文档确认版本匹配要求
• 库的路由配置（如next-intl的i18n.ts），是否存在正则表达式未处理空匹配的情况

4. 验证页面路由配置 #

• 核对所有跳转路径与app/或pages/目录下的路由文件完全匹配，避免拼写错误（如大小写、斜杠遗漏）
• 若使用动态路由，确认generateStaticParams（App Router）或getStaticPaths（Pages Router）返回的参数合法，无空值或无效格式

5. 临时隔离排查 #

• 暂时注释自定义路由中间件，重新构建部署，若错误消失，说明问题出在中间件逻辑
• 临时将<Link>组件替换为普通<a>标签（如<a href="/finance/bank">{t('AutoBank')}</a>），若能正常跳转，说明问题出在Next.js客户端路由系统的自定义逻辑中

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