如何在Next.js 13中在客户端运行函数一次？

w46czmvw 于 2023-05-17 发布在其他

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

在Next.js 12中，我使用了以下方法，当应用程序加载时，在客户端运行一次某个函数，例如：要将版本号记录到控制台，请执行以下操作：

// pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => console.log(`v${process.env.NEXT_PUBLIC_VERSION ?? ''}`), []);

  return <Component {...pageProps} />
}

如何在Next.js 13中使用app目录而不是pages目录进行相同的操作？根布局app/layout.tsx是一个服务器组件，所以我不能在那里使用useEffect。

next.js

来源：https://stackoverflow.com/questions/76250823/how-to-run-function-once-on-client-side-in-next-js-13

1条答案

按热度按时间

5vf7fwbs1#

一种方法是创建一个客户端组件，它只做日志记录，并在根布局中使用它：

// app/layout.tsx, server component

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

// VersionLogger.tsx, client component
'use client';

import { FC, ReactNode, useEffect } from 'react';

export const VersionLogger: FC<{ children: ReactNode }> = ({ children }) => {
  useEffect(() => console.log(`v${process.env.NEXT_PUBLIC_VERSION ?? ''}`), []);

  return <>{children}</>;
};

但是，我不确定这是否有任何性能影响。

赞(0）回复(0）举报 2023-05-17

我来回答

如何在Next.js 13中在客户端运行函数一次？

1条答案

相关问题

热门标签

最新问答