Next.js中渲染前的初始化代码应放置在何处？

核心问题梳理 #

需要在组件渲染前执行初始化代码（如第三方库插件配置、全局设置），这类代码不能放在useEffect中（会滞后于渲染，影响输出结果），当前方案是放在自定义_app.tsx的模块作用域，想确认是否合理，以及是否有更合适的实现方式。

可行方案解析 #

1. 自定义 _app.tsx 模块作用域（你的当前方案：完全合理）

模块作用域的代码会在服务端和客户端的模块加载阶段执行，也就是组件渲染之前，完全匹配你的需求。

• 注意事项：
  • 依赖浏览器环境的代码（如Modal.setAppElement）必须用typeof window !== 'undefined'包裹，避免服务端渲染时因不存在window对象报错。
  • 通用逻辑（如dayjs.extend(utc)）可以直接放在模块作用域，服务端和客户端都会执行，不会有问题。
• 示例代码：

  import dayjs from 'dayjs';
  import utc from 'dayjs/plugin/utc';
  import Modal from 'react-modal';
  import type { AppProps } from 'next/app';
  
  // 服务端+客户端通用初始化
  dayjs.extend(utc);
  
  // 客户端专属初始化，规避服务端环境报错
  if (typeof window !== 'undefined') {
    Modal.setAppElement('#modal-root');
    // 其他客户端自定义配置
  }
  
  export default function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
  }
  

2. Next.js 13+ App Router：根 layout.tsx 模块作用域

如果使用App Router（Next.js 13及以上版本），可以把初始化代码放在根layout.tsx的模块作用域中，同样会在组件渲染前执行。

• 若仅需客户端执行，可添加'use client'指令标记组件，再结合window判断：

  'use client';
  import dayjs from 'dayjs';
  import utc from 'dayjs/plugin/utc';
  import Modal from 'react-modal';
  
  dayjs.extend(utc);
  
  if (typeof window !== 'undefined') {
    Modal.setAppElement('#modal-root');
  }
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="zh-CN">
        <body id="modal-root">{children}</body>
      </html>
    );
  }
  

3. 服务端专属初始化：_document.tsx

如果有仅需在服务端渲染阶段执行的初始化逻辑，可以放在_document.tsx的模块作用域或getInitialProps方法中——_document仅在服务端运行，客户端不会执行这里的代码，适合不需要在客户端重复执行的服务端配置。

关于专门的setup函数 #

Next.js 并没有提供可导出的专属setup函数用于这类初始化逻辑。模块作用域执行是官方推荐的最直接方式，因为模块加载本身就发生在组件渲染之前，完全满足你的需求。

总结 #

你的思路是正确的，将初始化代码放在自定义_app.tsx的模块作用域是可行且合理的，只要做好服务端与客户端的环境判断，就不会有风险。根据你使用的是Pages Router还是App Router，选择对应的文件放置即可。

内容的提问来源于stack exchange，提问作者Brent Traut