Recoil与Next.js 13构建超时无法完成问题求助

以下是针对Recoil与Next.js 13 App Router兼容导致构建超时的具体解决方案：

• 升级Recoil到最新兼容版本
  旧版本Recoil对Next.js 13的App Router支持不完善，优先升级到0.7.7+版本：

  npm install recoil@latest
  # 或 yarn add recoil@latest
  

• 正确封装RecoilRoot到客户端组件
  必须确保Recoil相关代码仅在客户端组件中运行，避免在服务端组件中引入。创建单独的Recoil提供者组件：

  // app/providers/RecoilProvider.tsx
  'use client';
  import { RecoilRoot } from 'recoil';
  
  export default function RecoilProvider({ children }: { children: React.ReactNode }) {
    return <RecoilRoot>{children}</RecoilRoot>;
  }
  

  然后在根布局中引入该提供者：

  // app/layout.tsx
  import RecoilProvider from './providers/RecoilProvider';
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="zh-CN">
        <body>
          <RecoilProvider>{children}</RecoilProvider>
        </body>
      </html>
    );
  }
  

• 临时禁用React Strict Mode
  Next.js 13默认开启的Strict Mode会触发组件重复渲染，可能导致Recoil状态初始化逻辑重复执行引发超时。可在next.config.js中关闭：

  // next.config.js
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: false,
  };
  
  module.exports = nextConfig;
  

  注意：此为临时方案，生产环境建议定位到具体重复执行的代码进行优化后重新开启。

• 排查并优化Recoil状态初始化逻辑
  检查是否在atom/selector中执行了耗时同步操作（如大量数据计算、同步IO），这类逻辑会在构建阶段被执行，直接导致超时。将其改为异步逻辑，移至客户端组件的useEffect中执行：
  错误示例：

  import { atom } from 'recoil';
  
  // 构建阶段会执行的耗时同步操作
  const heavySyncData = Array(1000000).fill(0).map((_, i) => i);
  
  export const dataAtom = atom({
    key: 'dataAtom',
    default: heavySyncData,
  });
  

  修正方案：

  import { atom, useRecoilState, useEffect } from 'recoil';
  
  export const dataAtom = atom({
    key: 'dataAtom',
    default: [],
  });
  
  // 在客户端组件中异步加载数据
  export function useLoadData() {
    const [data, setData] = useRecoilState(dataAtom);
  
    useEffect(() => {
      const fetchData = () => {
        const heavyData = Array(1000000).fill(0).map((_, i) => i);
        setData(heavyData);
      };
      fetchData();
    }, []);
  
    return data;
  }
  

• 调整Next.js构建超时配置
  在next.config.js中增加构建超时时间或调整webpack配置：

  // next.config.js
  const nextConfig = {
    webpack: (config) => {
      config.watchOptions = {
        poll: 1000,
        aggregateTimeout: 300,
      };
      return config;
    },
  };
  module.exports = nextConfig;
  

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