Next.js Firebase 托管 404 错误（除 index.html 外）

Question

我已经构建了一个 nextjs 应用程序，并npm run build && npm run export使用命令部署到 firebase firebase deploy。在此之前，我firebase init在项目文件夹中仅使用默认选项，例如。不是单页应用程序。

然而，当我在 firebase 提供的 url 中访问我的项目后，我看到主页是 index.html，但每当我使用任何其他 slug 时，它都会抛出 404。为什么会发生这种情况？我已经包含了我的 firebase.json 文件，以防它有帮助。

firebase.json

  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Answer 1

对于想要将静态导出的 Next.js 应用部署到 Firebase 托管的每个人：

您必须将 "cleanUrls": true 添加到 firebase.json 中的托管配置中，如下所示：

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

如果没有“cleanUrls”配置，用户将必须导航到 https://example.com/login.html，以便 Next.js 路由到登录页面。使用该参数，对https://example.com/login 的Web 请求就可以工作。

Answer 2

根据规则，您可以让 Firebase Hosting 提供用户请求的确切文件。

要将其他/所有 URL 重写到您的index.html，您需要向您的firebase.json. 单页应用程序的典型重写规则可能如下所示：

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

Answer 3

如果有人仍在寻找这个，这就是为我解决的问题：

我使用了firebase 托管文档中所述的动态链接进行重写，就像我的firebase.json文件中一样：

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/**", 
        "dynamicLinks": true
      }
    ]
  }
}

这应该允许动态链接从 ("https://CUSTOM_DOMAIN/{dynamicLink}") 开始。