部署到Firebase后Next.js Links失效问题求助

问题描述 #

我之前在相关平台发过该问题，但现有解决方法无效。使用Next.js的Link标签实现页面导航时，本地开发和本地构建环境均正常，但部署到Firebase后，Link失去动态跳转特性，浏览器会触发页面刷新。已为路由添加尾斜杠（如/hello/），API路由也添加了前缀（如/fetch?x=3），这些配置在其他环境有效，仅Firebase环境失效。部署时遵循Firebase官方的实验性Next.js支持文档，我的Next.js配置如下：

const nextConfig = {
    reactStrictMode: true,
    webpack: (config) => {
        config.resolve.fallback = { fs: false, net: false, tls: false }
        config.externals.push("pino-pretty", "lokijs", "encoding")
        return config
    },
    trailingSlash: true,
}

module.exports = nextConfig

排查与解决步骤 #

• 检查Firebase Hosting重写规则
  打开firebase.json，确保重写配置正确指向Next.js服务入口。如果使用实验性服务器端渲染支持，配置应类似：

  {
    "hosting": {
      "public": "public",
      "rewrites": [
        {
          "source": "**",
          "function": "nextjsServer"
        }
      ]
    }
  }
  

  若采用静态导出（执行next export），则需将public字段指向out文件夹，并重写规则设置为：

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

• 升级Firebase CLI到最新版本
  实验性Next.js支持依赖较新的CLI版本，执行以下命令检查并升级：

  # 查看当前版本
  firebase --version
  # 升级到最新版
  npm install -g firebase-tools
  

• 规范Link组件的使用方式
  确保Link组件正确包裹<a>标签，且未在<a>标签上添加手动跳转的逻辑，示例：

  import Link from 'next/link'
  
  // 正确写法
  <Link href="/hello/">
    <a>前往Hello页面</a>
  </Link>
  

  避免在<a>标签上绑定onClick事件触发window.location.href，这会覆盖Next.js的动态路由机制。

• 强制清除缓存重新部署
  部署时添加--force参数，强制刷新Firebase的缓存资源：

  firebase deploy --force
  

• 验证Next.js输出配置
  确认trailingSlash: true配置已生效，执行next build后，检查.next或out目录下的页面文件是否以index.html形式存放在对应路由的文件夹中（如hello/index.html对应/hello/路由）。

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