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 kno

Answer 1

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 2

The problem was nextjs doesn't work with external links that's why console throw's error.

When I remove all external link's and instead add internal link's everything worked fine.

Answer 3

"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 4

According to this document https://github.com/vercel/next.js/blob/master/errors/invalid-href-passed.md

Possible Ways to Fix It Look for any usage of next/link or next/router that is being passed a non-internal href and replace them with either an anchor tag () or window.location.href = YOUR_HREF.

Answer 5

You have to set parameter prefetch={false}

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

Answer 6

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

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