Link dynamic routes - "href" and "as" prop - Unhandled Runtime Error Error (5.0.0-beta.4)

[marteloge]

Product page: /pages/product/[name].tsx

I use Link imported from my i18n file.
In my component I use:
<Link href="/product/[name]" as="/product/test"><a>Test</a></Link>

This works perfectly with all other pages like my "/about" page.

Let's say I have selected Norwegian (language code: "no").
I want to look at the test product. The URL should then look like "/no/product/test".
When I click on the Link routing to my "test" product I get the error:

Unhandled Runtime Error
Error: The provided as value (/no/product/test) is incompatible with the href value (/product/[name]). Read more: https://err.sh/vercel/next.js/incompatible-href-as

The general link would be /product/test but as I use i18n the link is /no/product/test.

I could make the link as follows:
<Link href="/[lang]/product/[name]" as="/product/test"><a>Test</a></Link>

The problem with this is my default language (English: "en") does not have a language set in the URL.

• en: /product/test
• no: /no/product/test

When only using "href" without the "as" prop on dynamic links I get a 404:
<Link href="/product/test"><a>Test</a></Link>

The file fetched whit 404 response is http://localhost:3000/_next/static/development/pages/product/test.js. Right after
the test product page later is successfully fetched (http://localhost:3000/no/product/test).

--

Is there something I'm missing here or is this a bug?
I am testing the 5.0.0-beta.4 but I am not sure if it is related to the serverless beta version.

[marteloge]

Duplicate of #413?

[isaachinman]

@marteloge Yes, I believe so.

[pixelass]

@marteloge I think the solution provided in #413 (comment) should work for you. Maybe you can test and confirm since I want to open a PR for it this weekend.

[marteloge]

@marteloge I think the solution provided in #413 (comment) should work for you. Maybe you can test and confirm since I want to open a PR for it this weekend.

Seems to be working but I get a type error => Property 'localeSubpaths' does not exist on type 'InitOptions'.ts

Tested your solution:
Route: /product/[name].tsx

<LocaleLink href="/product/[name]" as="/product/test">
    <a>Test</a>
</LocaleLink>

The only problem I have is that I get a 404 on navigating with the LocaleLink:
Request URL: http://localhost:3000/_next/static/development/pages/no/product/%5Bname%5D.js
Request Method: GET
Status Code: 404 Not Found

I do see the page after some magic, but I guess the 404 should not appear anyway?

[pixelass]

The localeSubpaths typing issue is reported here #766. I am looking into a stable and reasonable fix for it.

I only tested this on v4.x.x so I'm not sure about the beta. In my case it works like a charm without any flash of a 404 page.

Maybe you can create a codesandbox to demonstrate the issue (or MVP repo). I'll be happy to investigate and consider it when creating the PR to add this into core.

[marteloge]

@pixelass Great :)
The beta is serverless and might behave a bit differently? It will be the next version so maybe get it to work with the beta version as well.

I have a test repo here you can check out: https://github.com/marteloge/inktemplate

Just added your code to /pages/product/[name].js and swapped out <Link with the LocaleLink.

[isaachinman]

Yeah to be clear, any PRs should be against the beta branch.