Next.js: Routing questions - params patterns like: "/profile/:id/edit" and server db -how to pass data to react components?

Created on 17 Dec 2016 · 3Comments · Source: vercel/next.js

hi, I know this issue was discussed before but I wasn't able to find a clear answer to this pattern.
First - correct me if I'm wrong, if you don't implement a custom server (http or express) the Link component supports only query string parameters like "/profile?id=123&action=edit" am I correct?
To be able to work with a url params pattern like "/profile/:id" you need to implement a custom server... this was the best I was able to guess going through the examples...
If so - how would you implement a pattern like "/profile/:id/edit"
In the 'parameterized-routing' example the index.js is using links like this one:
<Link href='/blog?ip=first' as='/blog/first'><a>My first blog post</a></Link>

and I wasn't able to decipher what is the necessary workflow on server.js
server.js declares const match = route('/blog/:id')

and then it is unclear what exactly goes to the address bar, and what is the data that is being pushed to the react component?
How do I handle routes like "/profile/:id/edit"
How do I handle many routes in a generic way (coming from react-router I was looking for the match utility equivalent...)
Also, if I have db data fetching before rendering - how can I pass the fetched data to the react component.
All of these are a bit obscure and I would seriously appreciate your help as I was trying to guess my way through with no success.

Thank you
Ajar

Source

YarivGilad

👍2

Most helpful comment

This is a set of good questions.
We'll add more info on the docs.

For now, think like this:

Next.js only knows how to serve pages. You should pass via params. (Like: /blog?id=first)
With #310 we allow a way to customize how it looks to the outside world. (Like: blog/:id See
And when you are doing client side routing, client side app don't know anything about custom urls.
So, you need use Link as: <Link href='/blog?id=first' as='/blog/first' />
- href: this is the actual url of the page
- as: this is how it should looks like in the browser (typically, it should match with your custom URL pattern)

arunoda on 17 Dec 2016

👍5

All 3 comments

This is a set of good questions.
We'll add more info on the docs.

For now, think like this:

Next.js only knows how to serve pages. You should pass via params. (Like: /blog?id=first)
With #310 we allow a way to customize how it looks to the outside world. (Like: blog/:id See
And when you are doing client side routing, client side app don't know anything about custom urls.
So, you need use Link as: <Link href='/blog?id=first' as='/blog/first' />
- href: this is the actual url of the page
- as: this is how it should looks like in the browser (typically, it should match with your custom URL pattern)