Invalid `<Link>` with `<a>` child

Introduction

This error is common expecially if you are using an old version of nextjs.I incurred the error when i tried to update my platform to the latest nextjs version.

So,what do you do when you get the error?

It's important to note that starting with Next.js 13, Link renders as a, so attempting to use a as a child is invalid.

Fixing

Run the new-link codemod to automatically upgrade previous versions of Next.js to the new Link usage:

npx @next/codemod new-link .
jsx

This will change Link a id="link" Home /a /Link to Link id="link" Home /Link.

Alternatively, you can add the legacyBehavior prop Link legacyBehavior a id="link" Home /a /Link.

That's it!Problem Solved.