Next.js href属性不匹配问题求助：服务端与客户端路由不一致

这个警告是服务端渲染(SSR)与客户端 hydration 不匹配导致的：

• 服务端没有localStorage，所以初始isAuth为null，渲染未登录状态的菜单（登录/注册链接）
• 客户端初始化时直接读取localStorage中的认证状态（比如"true"），立即渲染已登录状态的菜单（个人中心/订单链接）
• 两者渲染的href属性不一致，触发 React 的 hydration 校验警告

1. 修正 App 组件的状态初始化逻辑 #

确保服务端和客户端初始状态一致，仅在客户端 hydration 完成后读取localStorage更新认证状态：

export default function App({ Component, pageProps }) {
  // 初始状态设为 null，服务端和客户端保持一致
  const [isAuth, setAuth] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 仅在客户端 hydration 完成后读取 localStorage
  useEffect(() => {
    const storedAuth = localStorage.getItem('isAuth');
    setAuth(storedAuth ?? null);
    setIsLoading(false);
  }, []);

  // 仅当 isAuth 有有效值时同步到 localStorage
  useEffect(() => {
    if (isAuth !== null) {
      localStorage.setItem('isAuth', isAuth);
    }
  }, [isAuth]);

  return (
    <AppContext.Provider
      value={{
        isAuth,
        setAuth,
        isLoading
      }}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AppContext.Provider>
  );
}

2. 修正 Nav 组件的渲染逻辑 #

添加加载状态避免菜单闪烁，同时修复缺失的列表项 key：

export default function Nav() {
  const [visible, setVisible] = useState(false);
  const { isAuth, isLoading } = useContext(AppContext);

  const menuOne = [
    { label: <Link href='/LoginForm'>Log In</Link>, key: '0' },
    { label: <Link href='/RegisterForm'>Sign Up</Link>, key: '1' },
  ];

  const menuTwo = [
    { label: <Link href='/Profile'>Profile</Link>, key: '2' },
    { label: <Link href='/Tickets'>Tickets</Link>, key: '3' },
    { label: <span onClick={Logout}>Logout</span>, key: '4' }, // 补全缺失的 key
  ];

  const showDrawer = () => setVisible(true);
  const onClose = () => setVisible(false);

  // 加载中显示占位菜单，避免闪烁
  if (isLoading) {
    return (
      <div className="menu">
        <Link href='/'>
          <div className="logo" />
        </Link>
        <Menu theme="dark" mode='horizontal' disabledOverflow='true' />
        <Button className="barsMenu" type="primary" onClick={showDrawer}>
          <span className="barsBtn" />
        </Button>
      </div>
    );
  }

  return (
    <div className="menu">
      <Link href='/'>
        <div className="logo" />
      </Link>
      <Menu 
        items={!isAuth || isAuth === "false" ? menuOne : menuTwo} 
        theme="dark" 
        mode='horizontal' 
        disabledOverflow='true' 
      />

      <Button className="barsMenu" type="primary" onClick={visible ? onClose : showDrawer}>
        <span className="barsBtn" />
      </Button>
      <Drawer
        placement="bottom"
        closable={false}
        onClose={onClose}
        open={visible}
        closeIcon
      >
        {!isAuth || isAuth === 'false' ? (
          <>
            <Link href='/LoginForm'>
              <Button onClick={onClose}>Log in</Button>
            </Link>
            <Link href='/RegisterForm'>
              <Button onClick={onClose}>Sign up</Button>
            </Link>
          </>
        ) : (
          <>
            <Link href='/Profile' onClick={onClose}>
              <Button>Profile</Button>
            </Link>
            <Link href='/Tickets' onClick={onClose}>
              <Button>My tickets</Button>
            </Link>
            <div className='logout' onClick={Logout}>
              <span onClick={onClose}>
                <Button>logout</Button>
              </span>
            </div>
          </>
        )}
      </Drawer>
    </div>
  );
}

关键说明 #

• 初始状态同步：服务端和客户端均以null作为初始认证状态，确保首次渲染内容一致
• 延迟读取 localStorage：仅在客户端 hydration 完成后读取本地存储，避免 hydration 不匹配
• 加载状态：可选但推荐，避免用户看到未登录菜单瞬间切换为已登录菜单的闪烁效果

内容的提问来源于stack exchange，提问作者Josip Marić