I’m learning nextjs by their website guide, but I’m on a problem that I cannot really find anywhere. Everything was good until this point:
https://nextjs.org/learn/dashboard-app/navigating-between-pages#pattern-showing-active-links – my localhost:3000/dashboard works charming, unless i add “use client”; directive on the top of my code. As soon as I do it this screen is thrown at me. Doing rest of the course doesnt work, all I can see is this error. Do you have any idea if it’s something wrong with guide (which I doubt) or I am just dumb and can’t see something? There’s my nav-links.tsx code just in case:

It works as charm unless I add ‘use client’;

'use client';

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link'

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="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"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

For context – I’m following the guide since project installation, so I doubt I could’ve messed something up. Would be nice if someone knows whats up.

Searched through reddit, stack overflow but couldn’t find anything.