在Next.js的app目录中为所有页面添加逻辑的全局文件是什么？

ftf50wuq 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(130)

useEffect所有页面的主（全局）文件是什么？在Next.js之前，你可以在_app.tsx中使用useEffect，它会影响所有页面。示例如下：

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

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

    </>
  );
};

字符串
在所有页面上，您可以看到console.log。现在在app目录下使用Next.js，在哪个文件中可以使用全局useEffect？因为您不能在服务器文件中使用useEffect，例如在layout.tsx中。

next.js

来源：https://stackoverflow.com/questions/76732579/what-is-the-global-file-to-add-logic-for-all-pages-in-next-jss-app-directory

1条答案

按热度按时间

jyztefdp1#

正如您在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>
  );
}

的数据

赞(0）回复(0）举报 2023-08-04

我来回答

在Next.js的app目录中为所有页面添加逻辑的全局文件是什么？

1条答案

相关问题

热门标签

最新问答