如何修复NextJS+Material UI+Apollo中的useLayoutEffect警告？

我之前也碰到过一模一样的问题！这个警告确实挺烦人的，本质原因是服务端渲染（SSR）时React的useLayoutEffect钩子不会执行，而Material UI里不少组件（比如Drawer、AppBar这类需要实时计算布局的组件）依赖了这个钩子，导致客户端hydrate后的UI和服务端输出的初始UI不匹配，触发了警告。下面给你几个实用的解决办法：

方法1：全局替换useLayoutEffect为同构版本（最快解决） #

在你的NextJS项目_app.js/_app.tsx文件开头加一段代码，让服务端环境自动用useEffect替代useLayoutEffect，客户端保持正常使用：

import * as React from 'react';

// 仅在服务端环境替换useLayoutEffect
if (typeof window === 'undefined') {
  React.useLayoutEffect = React.useEffect;
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

这个方法简单直接，能快速消除所有相关警告。唯一需要注意的是：useEffect在DOM更新后执行，useLayoutEffect在DOM更新前执行，全局替换可能让极少数依赖布局同步的组件出现微小渲染延迟，但绝大多数业务场景下完全可以忽略。

方法2：动态导入组件，禁用SSR（更精准） #

如果你不想全局修改钩子行为，可以针对触发警告的Material UI组件，用NextJS的dynamic导入并禁用SSR，让这些组件只在客户端渲染：

import dynamic from 'next/dynamic';

// 比如某个用到MUI Drawer的组件触发了警告
const MyDrawerComponent = dynamic(() => import('../components/MyDrawer'), {
  ssr: false,
  loading: () => <div>加载中...</div> // 可选：添加加载状态提示
});

这种方式更精准，不会影响其他组件的SSR行为，适合能明确定位到触发警告组件的场景。

方法3：自定义同构钩子（适合自己开发的组件） #

如果是你自己写的组件用到了useLayoutEffect，可以封装一个同构版本的钩子，自动在服务端降级为useEffect：

import { useEffect, useLayoutEffect } from 'react';

// 同构版useLayoutEffect：客户端用原生useLayoutEffect，服务端用useEffect
export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

之后在自己的组件里用useIsomorphicLayoutEffect替代原生的useLayoutEffect就行，既保留客户端的布局同步能力，又能避免SSR警告。

另外提一句：如果你用的是Material UI v5 + NextJS 12+，记得先正确配置MUI的SSR样式（比如在_document.js里设置Emotion的样式收集），虽然这不能直接解决useLayoutEffect的警告，但能避免其他SSR相关的样式问题，让项目整体更稳定。

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