what is the difference between [id].js and [...id].js and [[...id]].js ?
Answered
Giant panda posted this in #help-forum
Giant pandaOP
Explain
Answered by B33fb0n3
well, first of these are pages for the pages router. That said you can imagine the following:
1. [id].js: For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.
2. [...id].js: Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName].
3. [[...id]].js: Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]].
So the difference between 2 and 3 is, that 3 is optional and 2 not
1. [id].js: For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.
2. [...id].js: Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName].
3. [[...id]].js: Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]].
So the difference between 2 and 3 is, that 3 is optional and 2 not
8 Replies
you post contains the tags "route handlers" and "api routes" so I guess you want to get the explaination for these. In route handlers/api routes there doesn't something like that exists. But you can still get the dynamic parts while doing this:
https://ibb.co/3WMDj0W
https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments
https://ibb.co/3WMDj0W
https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments
Giant pandaOP
@B33fb0n3 I understood the part of creating dynamic routes using catch-all segments. I just want to know what is the difference between [id].js and [...id].js and [[...id]].js ?
well, first of these are pages for the pages router. That said you can imagine the following:
1. [id].js: For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.
2. [...id].js: Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName].
3. [[...id]].js: Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]].
So the difference between 2 and 3 is, that 3 is optional and 2 not
1. [id].js: For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.
2. [...id].js: Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName].
3. [[...id]].js: Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]].
So the difference between 2 and 3 is, that 3 is optional and 2 not
Answer
Giant pandaOP
Cool, totally got it. Thanks @B33fb0n3 !!!
cool, please mark solution
@B33fb0n3 cool, please mark solution
Giant pandaOP
how to do that ?