nextjs“错误：不支持的服务器组件类型：未定义”

Question

我的代码如下

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

为什么会出现这个错误？ 以及如何解决？
（当您尝试“使用客户端；”时发生错误）

此代码来自nextjs官方教程代码：
https://nextjs.org/learn/dashboard-app/navigating- Between-pages

谢谢你。

Answer 1

我遇到了同样的问题，并通过将 NavLinks 组件更改为命名导出/导入来解决它

export function NavLinks() {
  const pathname = usePathname();
  return (
  //...
  )
}

在 sidenav.tsx 中，

import { NavLinks } from "@/app/ui/dashboard/nav-links";