Next.js在Firebase Hosting中除了index.html都出现404错误

Question

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

然而，在访问Firebase提供的网址时，我看到首页是index.html，但每当我使用其他slug时，它会抛出404错误。为什么会发生这种情况？ 我包含了我的firebase.json文件，以防它可能有帮助。

firebase.json

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

- Melih Alan

Answer 1

对于想要将静态导出的Next.js应用部署到Firebase托管的所有人:

您需要在firebase.json中的托管配置中添加"cleanUrls": true，如下所示:

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

如果没有配置"cleanUrls"，用户必须导航到https://example.com/login.html，这样Next.js才能将其路由到登录页面。有了此参数，Web请求https://example.com/login就可以正常工作。

- Niels

---

这对我在一个静态生成/导出的 Next.js 应用程序上起作用了。谢谢！ - Aylii

这让我困扰了很久。谢谢！ - ChazUK

我希望我们可以有两个被接受的答案！ - Loolooii

Answer 2

如果有人仍在寻找解决方案，这是我使用的解决方法:

我像firebase托管文档中所述（链接）那样在我的firebase.json文件中使用dynamicLinks进行重写：

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

这应该允许dynamicLinks从("https://CUSTOM_DOMAIN/{dynamicLink}")开始。

- Jason Greb

---

这在2022年适用于Next.js。 - Benjamin Bialy

Answer 3

根据您所设置的规则，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"
  } ]
}

- Frank van Puffelen

---

谢谢您的回答，但实际上这不是spa，请问在使用nextjs构建多页面Web应用程序时应该怎么做？ - Melih Alan

啊，那就需要重写成云函数或云运行了。如果您在我提供的文档链接中向下滚动一点，也有相关示例。 - Frank van Puffelen

嘿，@MelihAlan，你在这方面有什么进展了吗？ - Frank van Puffelen

我已经尝试过了，但是我意识到我从一开始就做错了！因为NextJs是一个SSR框架，所有的路由（页面）都需要在服务器端渲染，这就是为什么我上传了一个名为server.js的文件，其中包含一个云函数（在firestore云函数中运行），用于处理所有的路由。这解决了问题。我是新手，所以我无法理解您所提到的文档，如果这与您的答案相同，请让我知道，以便我可以接受您的答案。再次感谢。 - Melih Alan

确实是一样的：您的 server.js 在常规的 Cloud Functions/Express 应用程序中扮演与 index.js 相同的功能。 - Frank van Puffelen

当我在Firebase上部署我的Quasar应用程序时，遇到了同样的问题。除了上面提到的“重写”之外，我还需要在firebase.json中添加“cleanUrls”: true。 - Loren

Answer 4

对我来说，在 firebase.json 文件中将所有路由添加到重写下起作用。以下是示例。

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

- sanath_p

Answer 5

如果有人在使用Firebase的实验性Web框架（https://firebase.google.com/docs/hosting/frameworks/nextjs_）部署NextJS应用程序并使用getServerSideProps时遇到问题，我在这里找到了答案：https://dev.to/rowaxl/what-i-struggled-with-next-js-using-firebase-hosting-and-enable-ssr-4e67

我不再将**重定向到/index.html，而是将其指向生成的云函数服务器，该云函数通过firebase deploy生成。

这是我的firebase.json文件：

{
  "hosting": {
    "site": "my-site",
    "source": ".",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "us-central1"
    },
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/auth/**",
        "function": "authFunction"
      },
      {
        "source": "**",
        "function": "ssrmysite"
      }
    ]
  }
}

- ibranda

Answer 6

如果您尝试使用实验启用部署，我建议您尝试正常部署。

请删除 .firebase 文件夹和 firebase.json 文件，并关闭实验。同时，请删除现有的云函数。

firebase experiments:disable webframeworks #run to turn off experiments

使用以下步骤部署您的应用程序：https://github.com/milon27/next-js-portfolio 您还可以参考此视频：https://youtu.be/PXqXOxr-LMg

- Sanjeet kumar