如何在Next.js中集成FCM？能否在服务端处理FCM相关事件与模块？

1. 如何在Next.js中实现FCM集成？ #

FCM集成分为客户端配置和服务端配置两部分：

客户端配置（处理通知权限、获取Token、接收消息） #

• 安装依赖：npm install firebase
• 创建Firebase客户端初始化文件（lib/firebase/client.js）：

  import { initializeApp } from "firebase/app";
  import { getMessaging } from "firebase/messaging";
  
  const firebaseConfig = {
    // 从Firebase控制台获取的项目配置
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  const app = initializeApp(firebaseConfig);
  export const messaging = getMessaging(app);
  

• 编写客户端组件处理权限和Token（components/FCMSetup.js，需添加"use client"指令）：

  "use client";
  import { messaging } from "@/lib/firebase/client";
  import { getToken, onMessage } from "firebase/messaging";
  import { useEffect } from "react";
  
  export default function FCMSetup() {
    useEffect(() => {
      const setupFCM = async () => {
        const permission = await Notification.requestPermission();
        if (permission === "granted") {
          const token = await getToken(messaging, {
            vapidKey: "YOUR_VAPID_KEY" // 从Firebase控制台Cloud Messaging页面获取
          });
          if (token) {
            // 将Token发送到后端保存
            await fetch("/api/save-fcm-token", {
              method: "POST",
              body: JSON.stringify({ token }),
              headers: { "Content-Type": "application/json" }
            });
          }
        }
      };
  
      setupFCM();
  
      // 处理前台消息推送
      const unsubscribe = onMessage(messaging, (payload) => {
        new Notification(payload.notification.title, {
          body: payload.notification.body,
          icon: payload.notification.icon
        });
      });
  
      return () => unsubscribe();
    }, []);
  
    return null;
  }
  

• 添加后台消息处理的Service Worker：在public目录下创建firebase-messaging-sw.js：

  importScripts("https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js");
  importScripts("https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js");
  
  const firebaseConfig = {
    // 同客户端配置信息
  };
  
  firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();
  
  messaging.onBackgroundMessage((payload) => {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: payload.notification.icon
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

服务端配置（发送消息、管理Token） #

• 安装依赖：npm install firebase-admin
• 创建Firebase服务端初始化文件（lib/firebase/server.js）：

  import admin from "firebase-admin";
  
  if (!admin.apps.length) {
    admin.initializeApp({
      credential: admin.credential.cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
        privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, "\n")
      })
    });
  }
  
  export const fcmAdmin = admin.messaging();
  

• 编写API路由保存Token（app/api/save-fcm-token/route.js）：

  import { NextResponse } from "next/server";
  
  export async function POST(request) {
    const { token } = await request.json();
    // 将Token与用户关联，保存到数据库
    // 示例：假设你有用户ID，这里需要根据实际业务处理
    return NextResponse.json({ success: true });
  }
  

• 编写API路由发送消息（app/api/send-notification/route.js）：

  import { fcmAdmin } from "@/lib/firebase/server";
  import { NextResponse } from "next/server";
  
  export async function POST(request) {
    const { token, title, body } = await request.json();
    try {
      const message = {
        notification: { title, body },
        token
      };
      await fcmAdmin.send(message);
      return NextResponse.json({ success: true });
    } catch (error) {
      return NextResponse.json({ success: false, error: error.message }, { status: 500 });
    }
  }
  

2. 是否可在Next.js服务端处理FCM服务端事件？ #

可以。FCM支持通过Webhook推送服务端事件（比如消息送达回执、发送失败通知），你可以在Next.js中创建API路由作为事件接收端点：

• 创建Webhook处理路由（app/api/fcm-webhook/route.js）：

  import { NextResponse } from "next/server";
  
  export async function POST(request) {
    const eventData = await request.json();
    // 根据事件类型处理逻辑
    switch (eventData.message.status) {
      case "MESSAGE_DELIVERED":
        // 更新数据库中消息的送达状态
        break;
      case "MESSAGE_FAILED":
        // 处理发送失败，比如记录日志、重试发送
        break;
      default:
        console.log("未处理的事件类型:", eventData);
    }
    return NextResponse.json({ received: true });
  }
  

• 在Firebase控制台的Cloud Messaging页面，配置该API路由的URL作为事件通知端点，并验证请求签名确保安全性（FCM会在请求头中携带签名，你可以通过公钥验证请求来源）。

3. 能否在服务端同时处理客户端与服务端模块？ #

可以，但需严格遵守Next.js的环境隔离规则：

• 客户端模块（如firebase/messaging）只能在客户端组件（添加"use client"指令）或浏览器环境中运行，不能在服务端组件、API路由中调用。
• 服务端模块（如firebase-admin）只能在服务端组件、API路由、Server Actions中运行，不能在客户端环境中执行。

如果需要关联两端逻辑，比如服务端根据用户信息获取对应FCM Token发送消息，可通过以下方式实现：

1. 客户端组件获取Token并上传到服务端保存（关联用户ID）。
2. 服务端在需要发送消息时，从数据库中取出用户对应的Token，调用firebase-admin的发送接口。

通过这种分离方式，即可在服务端协调处理客户端相关的FCM逻辑，同时避免环境冲突。

内容的提问来源于stack exchange，提问作者Shoaib Raza