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

Question

我正在尝试在 Firebase 托管上部署 next.js 应用程序。但我不明白将哪些文件推送到服务器。当我运行

npm run build

并将构建文件夹推送到 firebase 时。但给出错误，没有找到index.html文件。

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

Answer 1

首先检查

这个。 这是 Next.js 团队在其 GitHub 存储库中提供的官方示例。

示例背后的想法：

目标是使用 Firebase 托管重写规则在 Firebase Cloud Functions 上托管 Next.js 应用程序，以便通过 Firebase 托管 URL 提供我们的应用程序。每个单独的页面包都通过对云函数的新调用来提供，该云函数执行初始服务器渲染。

这是基于

https://github.com/geovanisouza92/serverless-firebase 和 https://github.com/jthegedus/firebase-functions-next-example 的工作，如此处所述。

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

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/

 目录并将所有文件放在那里准备上传。

注：

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

了解更多

Answer 3

在 package.json 上，您需要修改

build

 脚本。

"build": "next build && next export",

并且在 next.config.js 上您需要修改

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    loader: "imgix",
    path: "https://noop/",
  },
  reactStrictMode: true,
}

执行

npm run build

并生成文件夹/out

Answer 4

正如上面每个人都回答的那样，这是一个有点漫长而混乱的过程。

我在这里请求 Firebase 进行 Next JS 集成。

https://firebase.google.com/support/troubleshooter/report/features

如果我们都发送请求，那么firebase很快就会包含react，next js ONE CLICK DEPLOY功能。

因此我们不需要为一个项目去 GitHub、Vercel 和 Firebase。

Answer 5

更新：

找到了以下文档，使用它我部署了我的 Nestjs 应用程序而无需任何额外的命令。

https://firebase.google.com/docs/hosting/frameworks/nextjs