Up to NextJS 13, you needed to add a nested <a> element in your <Link>s if you wanted to add custom attributes (e.g., className) to the anchor element.
For example, the following code would be wrong (with NextJS < v13):
<Link href="/" className="some-class"> Click me </Link>
Instead, you’d have to write this code:
<Link href="/">
<a className="some-class">
Click me
</a>
</Link>
The same solution would be required if you wanted to nest any other elements inside your <Link>. You would need to wrap them into an extra (potentially empty) <a> element:
<Link href="/">
<a>
<span>Extra element</span>
</a>
</Link>
With NextJS 13 or higher, this is no longer needed, you can instead just write:
<Link href="/" className="some-class"> Click me </Link>
and
<Link href="/"> <span>Extra element</span> </Link>
The NextJS < 13 behavior will be shown in the next lecture, since that lecture was recorded before the release of NextJS 13.
If you are watching this course with version 13 (check your package.json file to find out), you can ignore my solution and simplify as described above (i.e., without the extra <a>).
