Next.js 13（App目录）如何在客户端仅执行一次函数？

因为Next.js 13的根布局（app/layout.tsx）默认是服务器组件，无法使用useEffect这类客户端钩子，你可以通过以下方式实现和Next.js 12中_app.tsx相同的效果：

步骤1：创建客户端专用的初始化组件 #

新建一个客户端组件，用'use client'指令标记，把需要在客户端仅执行一次的逻辑放在这个组件的useEffect里：

// app/components/ClientInit.tsx
'use client';

import { useEffect } from 'react';

export default function ClientInit() {
  useEffect(() => {
    // 这里替换成你的客户端初始化逻辑，比如打印版本号
    console.log(`v${process.env.NEXT_PUBLIC_VERSION ?? ''}`);
  }, []);

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

步骤2：在根布局中引入这个客户端组件 #

在根布局里导入并添加这个组件，因为根布局只会在应用初始化时渲染一次，所以组件内的useEffect也只会在客户端执行一次：

// app/layout.tsx
import ClientInit from './components/ClientInit';

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

注意事项 #

• 确保你的环境变量以NEXT_PUBLIC_开头，这样才能在客户端代码中正常访问。
• 这个方法的效果和Next.js 12中_app.tsx里的空依赖useEffect完全一致，只会在客户端应用加载完成后执行一次。

内容的提问来源于stack exchange，提问作者Samuli Asmala