Next Link组件部署Firebase Hosting后页面重载问题求助

针对本地运行next run start时Link组件正常，部署到Firebase Hosting后却触发浏览器硬刷新的问题，分享几个实测有效的解决方向：

1. 修正Firebase重写规则配置 #

Firebase Hosting需要正确的路由重写规则，让Next.js客户端路由接管页面跳转，否则会直接请求服务器导致刷新。

• 打开项目根目录的firebase.json文件，根据你的部署模式调整配置：

  • 静态导出模式（执行next build && next export生成out文件夹）：

    {
      "hosting": {
        "public": "out",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
    

  • SSR/SSG模式（用Firebase Functions运行Next.js）：

    {
      "hosting": {
        "public": ".next/public",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "**",
            "function": "nextServer"
          }
        ]
      },
      "functions": {
        "source": ".",
        "runtime": "nodejs18" // 注意Node.js版本需与Next.js兼容
      }
    }
    

• 若使用Next.js 13.4+ App Router的静态导出，需在next.config.js中添加output: 'export'配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    output: 'export',
    // 其他自定义配置
  }
  
  module.exports = nextConfig
  

2. 检查Link组件的使用规范 #

确保你使用的是Next.js官方的Link组件，且没有添加强制刷新的属性：

• 正确导入：import Link from 'next/link'
• 避免在Link内部或外部添加target="_blank"（除非确实需要新窗口打开）、onClick中调用window.location.href等会触发硬刷新的代码
• 正确用法示例：

  import Link from 'next/link'
  
  export default function Home() {
    return (
      <Link href="/about">
        关于我们
      </Link>
    )
  }
  

3. 清除Firebase Hosting缓存 #

部署后的缓存可能导致旧配置生效，执行以下命令强制清除缓存：

firebase deploy --only hosting:clear

4. 验证Next.js构建输出 #

• 静态导出模式下，确认next build && next export生成的out文件夹包含index.html及各路由对应的子文件夹（如about/index.html）
• SSR/SSG模式下，确认next build生成的.next文件夹完整，无缺失文件

内容的提问来源于stack exchange，提问作者Alex Sant'ana Santos