Dynamic route 404 error (_next/static) - only in production

[jundymek]

Dynamic routes works well but strange error appears in console. It occurs only in production.

<Link href="/tasks/[taskid]" as={/tasks/${task._id}}>

After click there is correct path in browser:
http://localhost:3000/tasks/5e0d17b8b7c9ff45b34035ce

but in console window there is a strange 404 error:
GET http://localhost:3000/_next/static/JqYn31bj4-Yi1dxwgYfPs/pages/tasks/5e0d17b8b7c9ff45b34035ce.js net::ERR_ABORTED 404 (Not Found)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://github.com/czechue/kodifaj-frontend' or simply 👇
2. Clone repository - git clone https://github.com/czechue/kodifaj-frontend.git
3. Switch to taskie branch - git checkout taskie
4. Install dependencies - npm install
5. Build and run - npm run build , npm run start
6. Open browser and run http://localhost:3000
7. Click any card on main screen
8. Open dev tools and see an error

Expected behavior

No console errors.

Screenshots

System information

• OS: macOS
• Browser (if applies) any browser
• Version of Next.js: 9.3.6
• Version of Node.js: v10.15.3

Thanks ❤️

[jamesmosier]

You should only use the next/link component for linking between Next pages. I didn't see a page in pages/tasks/[id].js, therefore you can just make your link <a href={`/tasks/${task._id}`}> in your Card component

The 404 is because Next is trying to prefetch the route that is linked in your <Link component but since there is no page with that name there is nothing to prefetch. Also prefetching only happens in production, hence why you don't see it when running your local dev server.

[typeofweb]

@jamesmosier what makes page, well, a page in this case?
There's a default export in pages/tasks/[ta kid].tsx here
https://github.com/czechue/kodifaj-frontend/blob/6e060dbe947bc2aa3cc2b79e990f7fb376a1b354/pages/tasks/%5Btaskid%5D.tsx#L47

[jamesmosier]

Sorry, I missed that there was a different branch to be looked at. In that case, you'll want your Link to look like the docs describe:

<Link href="/tasks/[taskid]" as={`/tasks/${task._id}`}>

[typeofweb]

Looks like it does:

<Link href="/tasks/[taskid]" as={`/tasks/${task._id}`}>

https://github.com/czechue/kodifaj-frontend/blob/6e060dbe947bc2aa3cc2b79e990f7fb376a1b354/components/listing/card/Card.tsx#L14

[jamesmosier]

I commented out the navigation components I found in components/header/Header.tsx and the error went away. I think this is because the links in the navigation are not correct and have href="#" causing issues with next/link.

As a secondary test I replaced href="#" with href="/" and that also made that 404 go away.