如何在Next.js项目中集成Firebase与Partytown并暴露logEvent函数

先搞定Partytown的基础配置 #

首先安装依赖：

npm install @builder.io/partytown

如果你用的是App Router（Next.js 13+）

在app/layout.js里加入Partytown组件：

import { Partytown } from '@builder.io/partytown/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* 其他head内容 */}
        <Partytown debug={true} />
      </head>
      <body>{children}</body>
    </html>
  );
}

如果你用的是Pages Router

在pages/_document.js中配置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { Partytown } from '@builder.io/partytown/react';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <Partytown debug={true} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

修改Firebase脚本，把logEvent暴露给主线程 #

Partytown的脚本跑在Web Worker里，要让主线程能调用logEvent，得把函数挂载到window上——Partytown会自动把window上的方法代理到主线程的window.partytown对象里。修改后的脚本如下：

<script
  type="text/partytown"
  dangerouslySetInnerHTML={{
    __html: `
      import { initializeApp, logEvent as firebaseLogEvent } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics.js";
      
      const firebaseConfig = {
        apiKey: "xxx",
        authDomain: "xxx",
        projectId: "xxx",
        storageBucket: "xxx",
        messagingSenderId: "xxx",
        appId: "xxx",
        measurementId: "xxx"
      };

      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);

      // 把logEvent挂载到window，Partytown会自动代理到主线程
      window.logEvent = (eventName, eventParams) => {
        firebaseLogEvent(analytics, eventName, eventParams);
      };
    `,
  }}
/>

在代码里调用logEvent的两种方式 #

方式1：直接通过window.partytown调用

在组件或任意JS代码里直接写：

window.partytown.logEvent('event_name', { button_id: 'submit' });

方式2：封装成工具函数（更优雅）

创建一个utils/firebase.js文件：

export const logEvent = (eventName, eventParams) => {
  // 先检查Partytown的logEvent是否已初始化
  if (window.partytown?.logEvent) {
    window.partytown.logEvent(eventName, eventParams);
  } else {
    // 开发环境可以加个提示，避免报错
    console.warn('Firebase logEvent not ready yet (Partytown initializing)');
  }
};

然后在组件里导入使用：

import { logEvent } from '../utils/firebase';

const handleClick = () => {
  logEvent('user_login', { method: 'email' });
};

几个注意点 #

• 调试模式：开着debug={true}可以在控制台看到Worker的日志，方便排查问题。
• 初始化时机：Partytown的Worker初始化可能比主线程慢，所以调用前最好做存在性检查，避免报错。
• CORS问题：Google的Firebase CDN允许Worker加载，一般不用额外配置。
• 静态文件：Next.js默认会处理Partytown的静态资源（比如partytown-sw.js），如果需要部署到CDN，可以参考Partytown文档调整lib配置。

内容的提问来源于stack exchange，提问作者Dawid Krajewski