Next.js 13.4.1 App Router部署到Netlify后路由行为异常

以下是针对性的排查和解决步骤：

• 更新Netlify Next.js插件版本
  旧版本的@netlify/plugin-nextjs对App Router的客户端导航支持可能存在缺陷，建议在项目根目录创建或修改netlify.toml，指定最新兼容版本：

  [[plugins]]
  package = "@netlify/plugin-nextjs"
  version = "4.39.0" # 可替换为当前最新版本
  

  若未配置netlify.toml，Netlify会自动使用默认插件，但手动指定版本能避免兼容问题。

• 排查导航干扰代码

  • 确认DashboardLayout中的Link组件没有被额外的<a>标签嵌套，也没有在onClick事件中调用window.location之类的跳转逻辑，这些会覆盖Next.js的客户端导航行为。
  • 检查ComponentThatHasUseEffect是否存在全局点击事件监听，若有需确保不会阻止Next.js的默认导航事件传播。

• 验证客户端组件边界
  虽然你的DashboardLayout已经标记了'use client'，但需确认没有在服务器组件层级中使用Link（App Router中服务器组件无法使用客户端导航逻辑）。当前布局已为客户端组件，这一步主要排除嵌套层级的隐性问题。

• 清理Netlify缓存重新部署
  登录Netlify后台找到对应站点，在部署页面选择「Clear cache and deploy site」，触发全新构建，避免旧缓存产物导致的异常行为。

• 检查Next.js构建配置
  打开next.config.js，确保没有禁用客户端导航的配置：

  module.exports = {
    reactStrictMode: true,
    // 避免设置output: 'export'（除非你明确需要静态导出，且已配置App Router的静态导出规则）
  }
  

  若误设置了output: 'export'，App Router的客户端导航会失效，需移除该配置。

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