next/router throws error on valid web archive links
See original GitHub issueWhat version of Next.js are you using?
12.0.4
What version of Node.js are you using?
16.13.0
What browser are you using?
It happens server-side and in Chrome/Safari/Mozilla and Edge
What operating system are you using?
debian
How are you deploying your application?
next build && next start
Describe the Bug
When passing a valid url like e.g. https://web.archive.org/web/20211125090953/https://github.com/
as href
attribute for an next/link
element, next/router
throws the following warning:
Invalid href passed to next/router: https://web.archive.org/web/20211125090953/https://github.com/, repeated forward-slashes (//) or backslashes \ are not valid in the href
The error message appears inside the executing console and browser console as well.
Expected Behavior
No warning/error
To Reproduce
Use the following example code snippet and include it in any page:
<Link href={'https://web.archive.org/web/20211125090953/https://github.com/'}>
Click me
</Link>
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Invalid href passed to router error after fresh installed create ...
Yes, nextjs throws that error. Don't use the component at all if linking to an external source, for external links you can use...
Read more >Problems or errors - Internet Archive Help Center
This error message simply means that the item has been removed from the site or is unavailable. There are a variety of reasons...
Read more >Re: Unable to access some sites in the wayback machine...
Re: Unable to access some sites in the wayback machine... Unfortunately, new site owners sometimes expand the 'robots.txt' directives that the Internet Archive...
Read more >What is WaybackMachine's error code 'Fail with Status 498
There is also NO reference to this Internet Archive error code from ANY search engine. ... I have been getting the same error...
Read more >Upgrade Guide - Next.js
To upgrade your links to Next.js 13, you can use the new-link codemod. ... Because of this change, invalid CSS will throw an...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@bytrangle, to use
Link
with valid external http addresses could be for example if you have a link collection, which is partly internal links and external ones and you wanted to avoid the hassle to create your own boilerplate code of:if internal: <a> Else: <Link>
, which is btw. already builtin into the Link component in a similar formLast time I checked it never was specified anywhere that
Link
has to be exklusives used for internal linkingExternal URLs are expected to work with
next/link
since #15792It’s rather the logic that checks for external links that should not produce an error in this case.