1

When I use the next/link component to link my pages together, I ended up having to specify both the "server side" URL and the queryparam-eterized URL.

An example could be a dynamic /post/:id route that is served by the pages/post.js file:

<Link href="/post?id=2" as="/post/2"><a>Go to post number 2</a></Link>

Is there a different way to do this? It's cumbersome to remember to do this everywhere I want to have a dynamic route.

Kris Selbekk
  • 7,438
  • 7
  • 46
  • 73
  • It looks like [you don't have to specify both of them if you don't want to](https://github.com/zeit/next.js/blob/b492e6703de62e1b4a63957350108ce8db6eeb68/lib/link.js#L141-L145). – Tholle Aug 01 '18 at 19:07
  • 1
    Unfortunately, AFAIK I think that code relates to passing on the `href` tag to the immediate flag. – Kris Selbekk Aug 01 '18 at 19:15

1 Answers1

1

The href is always necessary as it point to the page that will take care of rendering the content. However the as prop is optional, it's only used to "prettify" the URL shown to the user.

Imagine you land on a site and you see www.mysite.com/post?id=121, looks uglier than just /post/2.

This is still cumbersome, hence there are a few nice libraries that make this easier, the most popular AFAIK is https://www.npmjs.com/package/next-routes, this package makes your life easier when using Link, however you need to write down your own routes.

Obed Parlapiano
  • 3,226
  • 3
  • 21
  • 39
  • Thanks. Yeah I kind of landed on the same conclusion. Thanks for the tip on `next-routes` though - hadn't spotted that one yet. – Kris Selbekk Aug 03 '18 at 07:38