Invalid href passed to next/router on"next": "12.0.7"

Environment:

• Windows 11
• "next": "12.0.7"
• TypeScript ( Js should have same issue).
• Dynamic router link

I met an error "
: \, repeated forward-slashes (//) or backslashes \ are not valid in the href", which always shown on VScode & web browsers!

The root cause is that I joined "/" with my each url string when I generate dynamic links. (nextjs V9 looks should do it!)

href: join('/', slug), 

slugRoot = "/"
slugAbout = "/about"

Solution: Do NOT add "/" on head of your url string, and then add "/" on your tag.

// href: join('/', slug), 
href: slug,

slugRoot = ""
slugAbout = "about"

// <Link href={`/${yourPath}`} ></Link>
<Link href={`/${href}`} key={href} prefetch={false} passHref>

Happy Coding!