如何在 Firebase 托管上部署 next.js 应用程序？

Question

我正在尝试在 Firebase 托管上部署 next.js 应用程序。但我不明白要将哪些文件推送到服务器。当我运行npm run build并将构建文件夹推送到 firebase 时。但是给出了没有找到 index.html 文件的错误。

这是构建文件夹的输出图像。我刚刚创建了一个用于测试目的的简单组件。

Answer 1

首先检查 [this][1]。这是 next.js 在其 github 存储库中提供的官方示例。

示例背后的想法

目标是使用 Firebase 托管重写规则在 Firebase Cloud Functions 上托管 Next.js 应用程序，以便从我们的 Firebase 托管 URL 提供我们的应用程序。每个单独的页面包都在对执行初始服务器呈现的 Cloud Function 的新调用中提供。

PS：我知道发布链接作为答案不是最好的方式，但我的代表力量不足以将其作为评论。

如果其他人读到此内容，则更新中的示例不适用于 React Hooks。作者在这里创建了一个[更新的简化版本](https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs)，它可以与钩子一起使用。 (2认同)

Answer 2

在package.json你需要建立和出口像添加NPM脚本。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },

然后你可以运行

npm run build && npm run export

下一次构建将构建您的项目以进行运输和导出，将您的文件准备好托管在静态托管服务器（如 firebase 托管）上。

npm run export

将创建一个out/目录并将所有文件放在那里准备上传。

笔记：

如果您的应用需要在运行时生成动态页面，则不能将其部署为静态应用。