Getting 404 in console [Production]

[Nitaaq]

Hello,

I've been trying to create a next js app that catches all links (permalinks) to one page,

first i've created a [...permalink].js page in pages root, lets call this page the permalink handler page for future reference

then all my links were like this :
<Link href="/[...permalink]" as="path/to">Link</Link>

which works great on the server side and the client side in development mode

when i go to production the following happens:

when i click the link, i get the permalink handler page, but i also get this message in console :

GET http://localhost:3000/_next/static/1600423115452/pages/path/to.js net::ERR_ABORTED 404 (Not Found)

when i refresh the page for SSR, i get 404 right away

maybe my approach to the whole thing is wrong, any help is much appreciated

[jamesmosier]

Hi @Nitaaq. I tested out a similar scenario to yours and was not able to reproduce it.

I did this:

<Link href="/posts/[...slug]" as="/posts/abc"><a>link to slug 1</a></Link>

with a directory of:

pages/
  posts/
    [...slug].js

and ran a next build then next start

---

I'd also recommend upgrading to v9.5.3 where the as prop is no longer required

[Gusterson]

@jamesmosier Are you saying now (9.5.3) rather than than

<Link href="/posts/[...slug]" as="/posts/abc"><a>link to slug 1</a></Link>

we can write

<Link href="/posts/abc"><a>link to slug 1</a></Link>

and this will work? (provided we have a /posts/[slug].js entry in our folder structure.)

[jamesmosier]

Correct! The as is no longer needed, just an href pointing to the slug you want.

[Nitaaq]

Hey @jamesmosier
the problem i had was i had some dummy links in the header with href="#" trying to prefetch whenever the page loads,
since i removed these dummy links everything worked,

Will try upgrading to 9.5.3 and get over the hassle of using as in every link

Thanks a lot