NextJS 13实验性app目录下全局初始化LogRocket类库的方法

在NextJS 13的App Router中，默认组件都是服务端组件，无法使用useEffect这类客户端钩子，所以原来在_app.tsx中的初始化方式不能直接复用。以下是几种可行的全局注入方案：

方案1：将Layout改为客户端组件 #

直接在layout.tsx顶部添加'use client'指令，将其转为客户端组件，之后就能正常使用useEffect执行初始化：

'use client'; // 必须放在文件最顶部
import LogRocket from 'logrocket';
import { useEffect } from 'react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID!);
    }
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

方案2：封装独立的客户端初始化组件 #

如果不想把整个Root Layout转为客户端组件，可以单独创建一个负责初始化的客户端组件，再在Root Layout中引入：

1. 创建components/LogRocketInit.tsx：

'use client';
import LogRocket from 'logrocket';
import { useEffect } from 'react';

export default function LogRocketInit() {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID!);
    }
  }, []);

  return null; // 不需要渲染任何内容
}

2. 在layout.tsx中引入该组件：

import LogRocketInit from '@/components/LogRocketInit';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <LogRocketInit />
        {children}
      </body>
    </html>
  );
}

方案3：使用Next.js的Script组件加载 #

利用Next.js提供的next/script组件直接加载LogRocket脚本，并在脚本加载完成后执行初始化：

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        {/* 生产环境才加载 */}
        {process.env.NODE_ENV === 'production' && (
          <Script
            src="https://cdn.lr-ingest.com/LogRocket.min.js"
            onLoad={() => {
              // @ts-ignore 避免类型报错
              window.LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET_APP_ID!);
            }}
            strategy="lazyOnload" // 根据需求选择加载策略
          />
        )}
      </body>
    </html>
  );
}

这种方式不需要安装LogRocket的npm包，直接通过CDN加载，适合不想增加依赖体积的场景。

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