如何像Angular Universal一样将Next.js SSR部署到Firebase Hosting？

我打算借助Next.js的cookies功能处理CSRF Token，但不清楚如何将Next.js部署到Firebase Hosting。此前用Angular时，我是通过Cloud Function accountUniversal实现SSR网站部署的，以下是Angular的部署流程参考，同时给出Next.js对应的部署方案：

Angular SSR部署参考（原实现） #

构建与部署命令 #

npm run build:ssr:account
npm run build:functions
npx firebase deploy --only hosting:account,functions:accountUniversal

firebase.json 配置片段 #

"hosting": [
  {
    "target": "account",
    "public": "dist/account/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "accountUniversal"
      }
    ]
  }
]

项目根目录package.json 脚本配置 #

"build:ssr:account": "ng build --project account && ng run account:server && npm run --prefix functions copy:account",
"build:functions": "npm run --prefix functions build"

functions/package.json 脚本配置 #

"copy:account": "rm -rf ./dist/account && mkdir -p ./dist/account && cp -r ../dist/account ./dist/",
"build": "tsc"

Cloud Function核心代码（account-universal.ts） #

import {onRequest} from "firebase-functions/v2/https";
import {info} from "firebase-functions/logger";

export const accountUniversal = onRequest((request, response) => {
  info("accountUniversal");

  // eslint-disable-next-line @typescript-eslint/no-var-requires
  require("../../../../dist/account/server/main")
    .app()(request, response);
});

Next.js 部署到Firebase Hosting（SSR方案） #

因为需要使用cookies功能，需采用SSR模式部署，以下是具体步骤：

1. 准备Next.js项目 #

若还未创建项目，执行：

npx create-next-app@latest my-next-app
cd my-next-app

2. 安装Firebase相关依赖 #

# 全局安装Firebase CLI
npm install -g firebase-tools

# 登录Firebase账号
firebase login

# 安装项目依赖
npm install firebase-functions firebase-admin
npm install --save-dev firebase-functions-test

3. 初始化Firebase项目 #

在Next.js根目录执行：

firebase init

• 选择 Hosting 和 Functions
• 关联已有Firebase项目或创建新项目
• Functions环境选择TypeScript
• 不要覆盖现有package.json
• Hosting的public目录暂设为out（后续会配合配置调整）
• 不配置单页应用（后续通过rewrites实现）

4. 配置Next.js输出模式 #

在next.config.js中添加standalone输出配置，适配Cloud Functions运行：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
}

module.exports = nextConfig

5. 修改Firebase配置（firebase.json） #

将所有请求转发到Cloud Function，替换配置内容：

{
  "functions": {
    "source": ".",
    "runtime": "nodejs20"
  },
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "nextServer"
      }
    ]
  }
}

6. 编写Cloud Function启动Next.js服务 #

替换functions/src/index.ts内容：

import * as functions from "firebase-functions";
import { createServer } from "http";
import { parse } from "url";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({
  dev,
  dir: "./.next/standalone",
});
const handle = app.getRequestHandler();

export const nextServer = functions.https.onRequest(async (req, res) => {
  functions.logger.info("Next.js server received request", { url: req.url });
  await app.prepare();
  const parsedUrl = parse(req.url!, true);
  await handle(req, res, parsedUrl);
});

7. 配置构建与部署脚本 #

在项目根目录package.json中添加脚本：

"scripts": {
  // ... 保留原有Next.js脚本
  "firebase:build": "npm run build && npm run --prefix functions build",
  "deploy": "firebase deploy --only hosting,functions:nextServer"
}

8. 构建并部署 #

# 构建Next.js与Cloud Function代码
npm run firebase:build

# 部署到Firebase
npm run deploy

关键注意事项 #

• Node.js版本：确保Firebase Functions使用的Node.js版本与Next.js兼容，推荐nodejs20
• 环境变量：Next.js所需环境变量需在Firebase控制台的Functions配置中添加
• CSRF Token处理示例：在Next.js的Server Component或API Route中可直接使用cookies()：

// app/api/csrf/route.ts
import { cookies } from 'next/headers';

function generateCsrfToken() {
  // 自定义生成逻辑，比如生成随机字符串
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

export async function GET() {
  const csrfToken = generateCsrfToken();
  cookies().set('csrf-token', csrfToken, { 
    httpOnly: true, 
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict'
  });
  return Response.json({ csrfToken });
}

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan