Reactjs 为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么

发布于07月22日

对于所有页面，useEffect的主(全局)文件是什么？在Next.js之前，您可以在_app.tsx中使用useEffect，这将影响所有页面.示例:

const MyApp = ({ Component, pageProps }: AppProps) => {
  useEffect(() => {
     console.log("Hello!")
   )}

  return (
    <>
      <Head>
        <title>Title</title>
      </Head>

    </>
  );
};

在所有页面上，你都可以看到console.log.现在将Next.js与app目录一起使用，在哪个文件中可以使用全局useEffect？因为您不能在服务器文件中使用useEffect，例如在layout.tsx中.

推荐答案

正如您在Upgrade Guide上看到的，pages/_app.js和pages/_document.js已经被单个app/layout.js根布局所取代.

所以你可以把你的useEffect放在app/layout.js中，把它变成一个客户端组件，"use client"在顶部(知道这不会阻止应用的其他部分成为服务器组件):

// app/layout.js

"use client";

export default function RootLayout({ children }) {
  
  useEffect(() => {
     console.log("Hello!")
  }, []);

  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

但是，假设您不希望您的根布局成为客户端组件，则可以执行以下操作，例如，使用单独的组件:

// SomeGlobalComponent.js

"use client";

export default function SomeGlobalComponent() {
  useEffect(() => {
     console.log("Hello!")
  }, []);

  return <></>;
}

// app/layout.js

import SomeGlobalComponent from "./SomeGlobalComponent";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SomeGlobalComponent />
        {children}
      </body>
    </html>
  );
}