Next.js 13：如何在根布局中适配useEffect调用？

方案1：创建全局客户端组件嵌入根布局 #

根布局本身是服务器组件，但可以嵌套客户端组件。把全局useEffect逻辑放在一个独立的客户端组件里，再在根布局中引入，就能让所有页面触发这个全局副作用。

步骤：

1. 创建客户端组件（比如components/GlobalEffect.tsx），必须加上'use client'指令：

'use client';

import { useEffect } from 'react';

export default function GlobalEffect() {
  useEffect(() => {
    // 这里写全局执行的逻辑，比如全局事件监听、埋点初始化等
    console.log('全局useEffect已执行');
    
    // 可选：清理副作用的逻辑
    return () => {
      console.log('全局effect已清理');
    };
  }, []);

  // 组件无需渲染内容，返回null即可
  return null;
}

2. 在根布局app/layout.tsx中引入该组件：

// 根布局是服务器组件，无需加'use client'
import GlobalEffect from '@/components/GlobalEffect';

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

只要页面渲染，这个客户端组件就会挂载，自动触发useEffect，无需在每个页面单独配置。

方案2：自定义App组件（贴近旧版_app.tsx模式） #

如果习惯旧版_app.tsx的写法，可以在app目录下创建app.tsx作为全局客户端包裹组件：

1. 创建app/app.tsx：

'use client';

import { useEffect } from 'react';

export default function App({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // 全局副作用逻辑
    console.log('通过app.tsx执行全局effect');
  }, []);

  return <>{children}</>;
}

2. 在根布局中用这个组件包裹所有页面内容：

import App from './app';

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

这种模式和旧版_app.tsx的逻辑高度一致，更容易上手。

为什么不推荐Context方案？ #

Context的核心作用是跨组件传递状态，而非处理全局副作用。用客户端组件嵌套的方式更贴合Next.js App Router的组件模型，逻辑更直接，也能避免不必要的状态传递开销。

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