Link CSS

[crystal frost]

Hi @upbeat plover. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, the Link component is used for client-side transitions between routes. The Link component itself does not accept a className prop. Instead, you should apply the className to a child element of the Link component.

Here's how you can modify your code:

import Link from "next/link";
export default function NavBar() {
  return (
    <div className="bg-blue-50 p-5">
      <Link href="/">
        <a className="text-3xl text-blue-500 font-bold hover:scale-105 duration-75 active:scale-100">
          Quizal
        </a>
      </Link>
    </div>
  );
}

In this code, the className is applied to the <a> tag, which is a child of the Link component. This should allow your hover attributes to work as expected.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@upbeat plover kapa.ai is still learning and improving, please let us know how it did by reacting below

[upbeat plover]

@crystal frost Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

[crystal frost]

Let me check the knowledge base for you. One moment! :books:

---

This error occurs when you're using the <a> tag as a child of the <Link> component in Next.js 13 or later. Starting with Next.js 13, <Link> renders as <a>, so attempting to use <a> as a child is invalid.

To fix this error, you can either remove the <a> tag or use the legacyBehavior prop with the <Link> component.

Here's an example of how you can modify your code:

Before:

<Link href="/about">
  <a>About Us</a>
</Link>

After:

<Link href="/about">
  About Us
</Link>

Or, if you want to use the legacyBehavior prop:

<Link href="/about" legacyBehavior>
  <a>About Us</a>
</Link>

For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@upbeat plover kapa.ai is still learning and improving, please let us know how it did by reacting below

[upbeat plover]

<@&1089670008898080870> Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

import Link from "next/link";
export default function NavBar() {
return (
<div className="bg-blue-50 p-5">
<Link href="/">
<a className="text-3xl text-blue-500 font-bold hover:scale-105 duration-75 active:scale-100">
Quizal
</a>
</Link>
</div>
);
}