Next.js App目录下，全局useEffect应放在哪个文件中？

Pages 路由（旧版） #

在使用 Pages 路由的 Next.js 项目中，全局生效的 useEffect 需要放在 _app.tsx（或 _app.jsx）文件里。这个文件作为所有页面的入口容器，其中的客户端逻辑会覆盖所有页面。示例代码如下：

import { useEffect } from 'react';
import type { AppProps } from 'next/app';
import Head from 'next/head';

const MyApp = ({ Component, pageProps }: AppProps) => {
  useEffect(() => {
    console.log("Hello!"); // 所有页面加载时都会触发此日志
  }, []);

  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

App 路由（新版） #

在采用 App 目录的 Next.js 版本中，根 layout.tsx 默认是服务端组件，无法直接使用 useEffect 等客户端钩子。要实现全局生效的 useEffect，需要通过以下方式：

1. 创建独立的客户端组件 #

新建一个客户端组件（比如 components/GlobalEffect.tsx），通过 'use client' 指令声明为客户端组件，然后在其中编写全局 useEffect 逻辑：

// components/GlobalEffect.tsx
'use client';

import { useEffect } from 'react';

export default function GlobalEffect() {
  useEffect(() => {
    console.log("Hello from App Router global effect!"); // 全局生效的客户端逻辑
  }, []);

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

2. 在根 layout 中引入该组件 #

在根 layout.tsx 中引入上面创建的 GlobalEffect 组件，由于根 layout 会被所有页面共享，因此该组件的 useEffect 会在所有页面加载时触发：

// app/layout.tsx
import GlobalEffect from '@/components/GlobalEffect';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <GlobalEffect /> {/* 引入全局客户端逻辑组件 */}
        {children}
      </body>
    </html>
  );
}

原理说明 #

App 目录下的组件默认是服务端组件，仅允许服务端相关 API；通过 'use client' 标记的组件会被编译为客户端组件，支持使用 useEffect、useState 等客户端钩子。将全局客户端逻辑抽成单独组件，既保留了根 layout 的服务端渲染优势，又能实现跨页面的全局客户端行为。

内容的提问来源于stack exchange，提问作者Овов Очоы