Next.js conditional style

I want to make a link active if the pathname matches its href.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        <Link href="/">Home</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >Store</Link>
        <Link href="/actors">Actors</Link>
      </div>
 )}

That's what I tried but unfortunately it doesn't work. Can I do something like that?

You can't use this in functional components that is only accessible in class components. And to achieve that you want, you would simply have to write it manually, like:

<Link href="/store" className={`${pathname === "/store" ? "active":""}`} >Store</Link>

Also don't use && in className, cause it would add false in your className if your condition is false, so instead add ternary operator with "" in false condition.

Additionally to what Rao Asim said. to avoid repeating make them as an array then .map over the array.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        {[
          { label: "Home", href: "/" },
          { label: "Store", href: "/store" },
          { label: "Actors", href: "/actors" },
        ].map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

For better readability, you can move the array declaration out of the JSX:

function Component() {
  const pathname = usePathname();

  const navElements = [
    { label: "Home", href: "/" },
    { label: "Store", href: "/store" },
    { label: "Actors", href: "/actors" },
  ]

  return (
      <div className="links">
        {navElements.map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}