CODEWITHSUNDEEP
reactjsnext.js
Randall
Randall

Reputation: 2858

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

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.

Upvotes: 14

Views: 15441

Answers (6)

anup
anup

Reputation: 605

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.

Upvotes: 0

Haris Khan
Haris Khan

Reputation: 389

"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

Upvotes: 4

Yahya
Yahya

Reputation: 266

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

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

Upvotes: 25

eroll.maxhuni
eroll.maxhuni

Reputation: 291

You have to set parameter prefetch={false}

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

Upvotes: 12

Kkkk Kkkk
Kkkk Kkkk

Reputation: 271

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>)

Upvotes: 4

Randall
Randall

Reputation: 2858

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.

Upvotes: 1

Related Questions