Currently, the site has many routes that do not follow any standard or rules.
Example of current routes in the page:
/people -> Create and list all people
/person/[id] -> List one person
/person/delete/[id] -> Delete one person
/calendar -> Create a new calendar
/callcalendar -> List all calendar
/editcalendar/[id] -> Delete a calendar
People and Calendar have almost the same options but they have completely different url patterns.
There are different approaches to structuring URLs for web applications.
One commonly used pattern is the RESTful API approach.
This means everything should be grouped from the more generic to a more specific option.
Example:
/people -> List all people
/people/create -> Create a person
/people/[id] - > Show one person
/people/[id]/edit -> Edit one person
/people/[id]/delete -> Delete one person
In this example:
/people is the more generic thing, it will show all people from our app.
Then, we can see one person, /people/[id], this means, from the list of people, I want to show only that person with that id.
Then, if we want to edit that person, we can be more specific: /people/[id]/edit
The good thing is that this works for anything. In case we want to handle the calendar, we can follow the same approach:
/calendar -> show all the entries in the calendar
/calendar/create -> Create a new calendar day
/calendar/[id] -> Show a specific calendar day
/calendar/[id]/delete -> Delete that day
As you can see, there is a clear pattern here, everything follows the same approach. With this, It’s easy to understand the path to delete a job: /jobs/[id]/delete
Task
Organise all pages into a RESTful approach.
Tech help
To create the /people path and /people/create we need to use an index file.
The index means it's the first file to look for inside a folder.
This means we can have the following pages:
- people (folder)
- index.jsx
- create.jsx
If we open the page /people it will look for a file with that name. Since it does not exists, it will search for a folder with that name with an index inside. That will be our page.
Use the same approach to create /people/[id] and /people/[id]/edit. In this case [id] should be a folder.
- people (folder)
- index.jsx
- create.jsx
- [id] (folder)
You can learn more about this in NExtjs documentation. All you need is here: https://nextjs.org/docs/routing/dynamic-routes
Or use ChatGTP to learn more about dynamic routes in nextjs.
jcostadev23
commented
1 year ago
Currently, the site has many routes that do not follow any standard or rules. Example of current routes in the page:
People and Calendar have almost the same options but they have completely different url patterns.
There are different approaches to structuring URLs for web applications. One commonly used pattern is the RESTful API approach. This means everything should be grouped from the more generic to a more specific option.
Example:
In this example:
/peopleis the more generic thing, it will show all people from our app. Then, we can see one person,/people/[id], this means, from the list of people, I want to show only that person with that id. Then, if we want to edit that person, we can be more specific:/people/[id]/editThe good thing is that this works for anything. In case we want to handle the calendar, we can follow the same approach:
As you can see, there is a clear pattern here, everything follows the same approach. With this, It’s easy to understand the path to delete a job:
/jobs/[id]/deleteTask
Organise all pages into a RESTful approach.
Tech help
To create the
/peoplepath and/people/createwe need to use anindexfile.The
indexmeans it's the first file to look for inside a folder.This means we can have the following pages:
If we open the page
/peopleit will look for a file with that name. Since it does not exists, it will search for a folder with that name with anindexinside. That will be our page.Use the same approach to create
/people/[id]and/people/[id]/edit. In this case[id]should be a folder.You can learn more about this in NExtjs documentation. All you need is here: https://nextjs.org/docs/routing/dynamic-routes Or use ChatGTP to learn more about dynamic routes in nextjs.