Invalid href passed to router error after fresh installed create-next-app

Question

After installed nextjs app on my local machine using create-next-app I get this error in console Invalid href passed to router.

Does anyone know how to solve it?

I try to use to attribute instead of href attribute in Link component's but it doesn't help.

Answer 1

"External URLs, and any links that don't require a route navigation using /pages, don't need to be handled with Link; use the anchor tag for such cases instead."

Given in the docs: https://nextjs.org/docs/api-reference/next/link

Answer 2

Yes, nextjs throws that error. Don't use the component at all if linking to an external source, for external links you can use tag. In your case we can conditionally render either a plain anchor tag or use the link component if the prop matches an internal route. For example:

Link.indexOf('http') == 0 ? return(<a href={prop}>regular link</a>) : return(<Link>...</Link>)

Answer 3

Removing the protocol http or https from the external url fixes this issue

example https://stackoverflow.com/ should be //stackoverflow.com/

Answer 4

You have to set parameter prefetch={false}

<Link key={index} href={value} prefetch={false}>
                <a target={"_blank"}>
                    {icon}
                </a>
            </Link>