Why do I need to pass 'as' to Link on dynamic routes?

[andreaslorozco]

Hi everyone!

I'm having a lot of trouble understanding why I would need to pass the props as on my dynamic routes. I'm just building a basic demo app so I might not need to pass that prop but I'm curious and would like to understand more...

In my basic app I'm basically mapping over an array of users and returning a Link for each user:

{users.map(user => {
  return (
    <Link href={`/users/${user.id}`} ...>
      <a>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
      </a>
    </Link>
  )
})}

I built this a couple of weeks ago, and it worked as I expected. No warnings on console, my app was transitioning through routes normally.

However I was re-reading the docs and according to https://nextjs.org/docs/api-reference/next/link, I should be doing this...

{users.map(user => {
  return (
    <Link href={`/users/[id]`} as={`/users/${user.id}`} ...>
      <a>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
      </a>
    </Link>
  )
})}

I read that href is a file system path used by the page and it shouldn't change at runtime. Maybe what I'm mssing is that I don't know how it would change on runtime... maybe my demo app is too simple and I'm still too green to understand this...

But, could someone elaborate a little bit regarding this? Why if I ignore the as prop my dynamic routes work as expected? I'm guessing that I don't get any warnings because the as prop is not required and the template literal evaluates to a regular string so there is no way to know it's a dynamic route... right?

Thanks!!

[lfades]

TL;DR Next.js doesn't ship a manifest of routes to the client, so it doesn't know that /users/${user.id} has to use the page /users/[id].

Link is only used for page navigations, so the href attribute is used to select the page, which is usually the same path that's going to be in the URL, when that's not the case is when as is required, to let href select the page and then as will select the path.

It can be confusing, but we'll be working on improving this 😌

[andreaslorozco]

Hey @lfades thanks for the reply! Looking forward to those improvements :)