如何在 8.0 版中使用 `target: "serverless"` 使用 Next.js 正确实现无服务器 SSR

Question

Next.js 8.0 刚刚引入了一个新的target: "serverless" 配置设置，在此blog post 上进行了描述。我设置了一个基本的 hello world 应用程序 (here) 来测试它。将.next/serverless/pages/index.js 的输出复制粘贴到谷歌云函数（它们相当于AWS Lambda）并让它调用render()，如上述博客文章中所述。

我遇到的问题是页面本身渲染得很好，但是它试图在与 lambda 相同的域中获取静态资产（脚本文件），这当然不起作用，因为除了 lambda 之外什么都没有脚本。

您可以在这里看到这种情况：

我的想法是使用 Next.js 的这个新特性来实现微前端架构。 pages/ 中的每个页面都可以有自己的开发团队/生命周期，并在后端进行相应的缩放。这是此功能的主要卖点之一，对吧？

解决这个问题的标准方法是什么？我需要为静态资产设置单独的服务器吗？然后将两者都放在某种负载平衡器或路由器后面？如果是这样，那不是违背了使用它来开发微前端的目的吗，因为静态资产将包括“index.js”、“about.js”和每个页面的脚本文件，并且需要重新部署任何时候更新任何页面？

希望我说的有道理。任何帮助表示赞赏！

Answer 1

我需要为静态资产设置单独的服务器吗？

我是新的 nextjs，但是是的，我相信这就是你所需要的。

由于您使用 GCP，因此您可能想尝试 Firebase，因为它包含 Google Cloud Functions（FB 功能是单独打包和销售的 Google Cloud Functions）和静态托管，可满足您的要求，包括您的详细信息提到了。

另一个问题是，nextjs 的这个新的无服务器功能似乎更面向 AWS Lambda，因为它将函数单独打包。您可能已经知道，但无论如何我会注意到 GCP 是面向“项目”的，并且您项目中的所有功能都共享一个入口点。我不会详细说明，因为这不是您要问的问题，但this popular SO question 会详细说明如何做到这一点。

编辑：我写了那个然后想起了this FB sample...一种基于旧版本的 nextjs 在 Firebase 上托管 nextjs 应用程序的不同方式。

Answer 2

为了让 next.js 与您的谷歌云功能一起使用，您需要创建一个 next.config.js（我假设您已经这样做了）并添加资产前缀

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
    target: 'serverless',
    assetPrefix: isProd ? 'https://yourRegion-projectId.cloudfunctions.net/functionName' : '',
}

在此之后，再次 npm 构建和部署。

Google Cloud 函数的免费调用次数为 2,000,000。 Firebase 为 125,000。

更新 - Firebase 免费调用现在是每月 2,000,000 次