Next.js部署到Firebase后Link跳转触发页面刷新问题求助

排查及解决思路： #

• 确认Next.js Link组件导入正确性
  必须确保导入的是Next.js官方的Link组件（import Link from 'next/link'），第三方Link组件或错误导入会导致客户端路由失效，触发全页面刷新。

• 修复onClick事件逻辑
  当前的onClick仅在disabled时阻止默认行为，但可能因事件冒泡干扰Link的客户端路由逻辑。调整代码如下，确保禁用时完全阻止事件传播：

  const CustomLink = ({ children, page, disabled, ...props }) => (
    <Link
      className={`...`}
      onClick={(event) => {
        if (disabled) {
          event.preventDefault();
          event.stopPropagation();
        }
      }}
      href={page}
      {...props}
    >
      {children}
    </Link>
  );
  

• 配置Firebase Hosting重写规则
  Firebase Hosting需要配置重写，让所有请求指向Next.js入口文件，否则客户端路由会被当作静态资源请求。在firebase.json中添加：

  {
    "hosting": {
      "public": "out", // 静态导出项目的目录，SSR项目需对应.next/public
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

  注意：SSR模式的Next.js项目不能仅用Hosting静态托管，需配合Firebase Functions部署。

• 检查属性传递冲突
  避免给CustomLink传递会触发浏览器默认跳转的属性（如错误使用target="_blank"但未加rel="noopener noreferrer"），确保剩余props正确传递给Next.js Link组件。

• 清除Firebase缓存
  部署后缓存可能导致旧代码生效，可通过Firebase控制台手动清除Hosting缓存，或使用命令强制刷新：

  firebase deploy --only hosting --force
  

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