如何在Next.js应用中正确插入自定义Facebook事件脚本？

直接粘贴原始脚本导致崩溃，核心原因是Next.js的SSR/SSG环境需要遵循特定的脚本加载规则，以下分两种路由方案给出正确实现：

一、Pages Router 项目（旧版路由） #

在pages/_document.js中自定义全局HTML结构，这是插入全局脚本的标准位置：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    // 替换为你的真实Facebook像素ID
    const pixelId = 'YOUR_FACEBOOK_PIXEL_ID'
    
    return (
      <Html>
        <Head>
          {/* Facebook Pixel 核心脚本 */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                !function(f,b,e,v,n,t,s)
                {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                n.queue=[];t=b.createElement(e);t.async=!0;
                t.src=v;s=b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t,s)}(window, document,'script',
                'https://connect.facebook.net/en_US/fbevents.js');
                fbq('init', '${pixelId}');
                fbq('track', 'PageView');
              `,
            }}
          />
          {/* Noscript 回退方案 */}
          <noscript>
            <img
              height="1"
              width="1"
              style={{ display: 'none' }}
              src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
            />
          </noscript>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

二、App Router 项目（新版路由） #

使用Next.js官方提供的next/script组件处理脚本加载，自动兼容SSR/SSG环境：

import Script from 'next/script'
import { Metadata } from 'next'

export const metadata = {
  title: '编程学校应用',
}

export default function RootLayout({ children }) {
  // 替换为你的真实Facebook像素ID
  const pixelId = 'YOUR_FACEBOOK_PIXEL_ID'
  
  return (
    <html lang="en">
      <head>
        {/* Noscript 回退方案 */}
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: 'none' }}
            src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
          />
        </noscript>
      </head>
      <body>
        {/* 加载Facebook事件脚本，用beforeInteractive确保尽早执行 */}
        <Script
          src="https://connect.facebook.net/en_US/fbevents.js"
          strategy="beforeInteractive"
        />
        {/* 初始化像素并触发PageView */}
        <Script id="facebook-pixel-init" strategy="afterInteractive">
          {`
            fbq('init', '${pixelId}');
            fbq('track', 'PageView');
          `}
        </Script>
        {children}
      </body>
    </html>
  )
}

关键注意事项 #

• 必须将YOUR_FACEBOOK_PIXEL_ID替换为真实的像素ID，否则脚本无法正常工作。
• 不要在普通页面组件中插入全局脚本，会导致重复加载或SSR环境下的window未定义错误。
• Pages Router中使用dangerouslySetInnerHTML是官方允许的全局脚本插入方式，只要脚本来源可信就无需担心安全问题。

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