升级NEXTUI最新版本后，Next.js Link包裹Button报错求助

问题原因 #

升级NextUI后，Button组件内部实现变更，直接用Next.js的Link包裹Button会导致事件处理时无法正确读取DOM节点属性，触发TypeError: Cannot read properties of undefined (reading 'nodeName')错误。

解决方案 #

方案1：用Button的as属性集成Next.js Link（推荐） #

这是官方适配的写法，直接将Button渲染为Next.js Link组件，避免嵌套冲突：

import Link from 'next/link';
import { Button, Text } from '@nextui-org/react';

<Button 
  as={Link} 
  href="/..." 
  size="lg" 
  rounded 
  className="bg-[#5379FE]"
>
  <Text color="white" className="text-md font-bold">
    Link text
  </Text>
</Button>

方案2：手动绑定路由跳转 #

如果需要自定义跳转逻辑，用useRouter实现手动导航：

import { useRouter } from 'next/router';
import { Button, Text } from '@nextui-org/react';

const YourComponent = () => {
  const router = useRouter();

  const goToTargetPage = () => {
    router.push('/...');
  };

  return (
    <Button 
      size="lg" 
      rounded 
      className="bg-[#5379FE]"
      onClick={goToTargetPage}
    >
      <Text color="white" className="text-md font-bold">
        Link text
      </Text>
    </Button>
  );
};

方案3：嵌套Link到Button内部（临时兼容） #

若必须保留嵌套结构，可将Link放在Button内并禁用Button默认点击事件：

import Link from 'next/link';
import { Button, Text } from '@nextui-org/react';

<Button 
  size="lg" 
  rounded 
  className="bg-[#5379FE]"
  onClick={(e) => e.preventDefault()}
>
  <Link href="/..." passHref>
    <Text color="white" className="text-md font-bold cursor-pointer">
      Link text
    </Text>
  </Link>
</Button>

说明 #

方案1完全符合NextUI设计规范，能从根源避免DOM和事件冲突，优先推荐使用；方案2适合需要额外跳转逻辑的场景；方案3仅作为临时兼容方案，不建议长期使用。

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