Dynamic Routing: Link component doesn't request the correct js file...

[realestninja]

I'm on "next": "9.1.5", and this is my file structure for pages:

pages/
  blog/
    show.js
  home/
    index.js

I have this dummy Navigation:

const Navigation = () => (
  <>
    <Link href="/home">
      <a>Home</a>
    </Link>
    <Link href="/blog/dummy-entry-1">
      <a>Dummy</a>
    </Link>
  </>
);

When navigating from anywhere to a blog page, the following happens. The page is loaded and displayed correctly, but not via javascript. It does a full page load. I observed the following:

Request URL: http://localhost:3000/_next/static/development/pages/blog/dummy-entry-1.js
Request Method: GET
Status Code: 404 Not Found

When going to /home, it works fine:

Request URL: http://localhost:3000/_next/static/development/pages/home.js
Request Method: GET
Status Code: 200 OK

The thing that's causing the problem is that the js file is called _next/static/development/pages/blog/show.js and not dummy-entry-1.js.

What am I missing? Why is this happening? Whats causing this?

[jamesmosier]

You have no page named dummy-entry-1 in your pages folder, therefore next/link cannot preload it (because it doesn't exist).

You should just use a normal <a> element if there is no corresponding page in /pages with the name that you are linking to.

If you want next/link to work you'd need to use a dynamic route and then use the link as such

[realestninja]

That link I posted was an example of what I generate dynamically. My routes look like this:

module.exports = routes()
  .add("home", "/home", "home/index")
  .add("blogShow", "/blog/:permalink", "blog/show");

Dynamic routing itself works, but it is not using the feature of Link. It is just loading the page with a new pageload

edit:
The part where I noticed that it is doing a fresh page load:

<Link href={`/blog/${permalink}`}>
  <a>
    <h3>{title}</h3>
  </a>
</Link>

Shouldn't it look for a show.js? Or is it looking for the correct file but the dummy-entry-1.js is really missing?

[jamesmosier]

Are you using getStaticPaths to generate the routes for your posts? If so, your link should be formatted like this when using dynamic routes.

pages/
  blog/
    [id].js

<Link href="/blog/[id]" as="/blog/dummy-entry-1">

If you are just making the determination which blog post to show in show.js then next/link will not work for you and you'll have to just use an <a href>. Next cannot know what page to client side transition to if it has no awareness of that page at build time.

---

Edit

Looks like you are using next-routes. Look at their docs on how to route using a custom link. Next's link will not work with that. This is much different than what I mentioned above. Next.js can now natively handle this use case following what I outlined above about getStaticPaths and getStaticProps.

Also it looks like next-routes hasn't been updated in years. Since then Next.js can now do everything and much more so I'd highly recommend you use what Next offers natively.

[realestninja]

Hey, thanks for your help James, I had not noticed that I was mixing up next-routes with next/link. I'm using Link from next-routes now and I get the expected behaviour of super fast page traversal :) Thanks for your time!