I searched for this but I could only find examples in Laravel and PHP, and I need to know how to do this with Next.js.
All I know is that I can do dynamic routes in Next.js the usual way like this ...
/pages/post/[postId] which will translate to /pages/post/23435 for example, and that way if someone has the URL I could just grab the [postId] with router.query and can show the correct post to the user, easy enough.
But what if I want to show the post name in the URL instead of the id? just like what Udemy does with dashes between the words ...
https://www.udemy.com/course/your-custom-react-component/learn/lecture/
And at the same time if someone has that URL I could still show the correct post to them?
I know I could just do /pages/post/[postName] and show the post name in the URL, but that won't be unique, and won't be able to show the correct post.
How can I do that?
You can to do it with postName as you propose, and then take care that postNames are unique and that each one maps to a postId (that's something you need to deal with on your side; so in your database you would generate a unique slug for each postName)
Another solution would be to show both the name and the id like /pages/post/[postName]/[postId]. You can use several params, check https://nextjs.org/docs/routing/dynamic-routes
Related
For a weblog I am trying to get the top 10 popular posts from for example the last month. I figured I'd get the data out of Matomo, as that's already tracking visits and has an API. I've never used this API before though, so I've been reading the documentation and trying out some things. I am able to get data from the API using the Actions.getPageUrls method. However, when I try to filter using segment=^http://example.org/post I still get data from other URL's. It looks like it filters on session and gives back all data from the sessions that have at least 1 page that conforms to the filter.
The full URL I'm using is: http://example.org/matomo/index.php?&module=API&token_auth=12345&method=Actions.getPageUrls&format=json&idSite=1&period=month&date=today&expanded=1&segment=pageUrl%3D%5Ehttp%253A%252F%252Fexample.org%252Fpost. I've also tried with less and no URL encoding for the segment, but that doesn't seem to make a difference. If I use a URL that doesn't exist I get an empty array returned.
Am I doing something wrong? Is there a different way to only get the top pages with a URL starting with http://example.org/post? Or do I have to sift through the data myself to only get the pages I want?
I am using Matomo version 3.13.5.
I figured it out. There is no need to use segment. This can be achieved using the flat, filter_column and filter_pattern parameters.
Setting flat=1 will make it so all pages are returned in a single array, instead of hierarchically.
With filter_column and filter_pattern I can filter the results.
The URL I use now is: http://example.org/matomo/index.php?&module=API&token_auth=12345&method=Actions.getPageUrls&format=json&idSite=1&period=month&date=today&flat=1&filter_column=label&filter_pattern=%5E%2Fpost%2F. This does exactly what I want.
The unencoded pattern is ^/post/, so this will filter out any page that does not start with /post/.
If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.
Usually I use ui-router state with id parameter like this:
/* route /news/{news_id} */
http://servername/#/news/14
but already I want to use alias string instead of id like this:
/* route /news/{news_title} */
http://servername/#/news/braking-news-of-usa
How to map news_title to news_id in angular or ui-router?
I don't think this specific to Angular, but you can consider following approaches.
Along with title append news id with some separator. e.g. breaking_news_of_usa_14. When someone clicks that link, in Javascript split the news title and retrieve the ID to query server API.
Make sure you have unique titles for news (overhead at serverside API e.g. unique index, hashes etc.) and instead of querying with news id, query using news title to get the details.
Maintain both news ID and news title like this /{news_title/{news_id}. With this you save overhead of introducing unique titles. (Reference, check stackoverflow URL format for question details.)
On our Drupal 7 site, we're trying to force Drupal to use a certain username- First Name, Last Initial - no matter what the user puts in the username field on the user form. Currently, there are fields for Username, First Name, and Last Name. Does anyone have an easy way to do this? It would also be nice if the user profile's URL would take be forced to use the Drupal-created username.
I've looked around and haven't seen any questions on this- let me know if I missed one!
There is a module that do just that RealName and it fairly easy to use and this is the documentation for the module if needed.
and you can alter the user profile link with Pathauto to what ever you want.
I am developing a web site using ASP.NET MVC. The site will be similar to StackOverflow in that there will be user submitted items that will have a numeric id and a textual title.
Now I am thinking how to design the URL routing system for the "item details" pages. I had thought of using the id alone (as in http://www.mysite.com/items/1234) or the title alone (as in http://www.mysite.com/items/how-to-foobarize-a-fizzbuzz). I see however that StackOverflow uses instead both of them (as in http://www.mysite.com/items/1234/how-to-foobarize-a-fizzbuzz).
So which one is the best approach? And what is the point of using both the id and the title in the URL? Isn't this redundant?
Yes, having both ID and title (which is most often called slug) is redundant, but it's cool both from SEO and UX standpoints.
There's one personal dislike about how it's done here on SO, though. I can't seem to understand why an ID is separated from a slug with a forward slash (/7754456/urls-for-item...). To me, each segment implies some sort of hierarchy, so dash will be more appropriate /7754456-urls-for-item...). But that's just me.
The advantage of using the title in that form (usually referred to as a "slug") is basically just that of URL readability. However, if you are not enforcing a uniqueness constraint on your titles then this will not necessarily be adequate to identify a record. Therefore, when both are used, the ID can be there for the server to actually to do the lookup and the slug is there for humans to read.