Next.js Routing Deep Dive — Groups, Dynamics & Catch-Alls

Next.js uses file based routing it means if your folder structure inside /app folder is like as /app/user then in the url let say http://localhost:3000/user render the content of the /user route. And also at http://localhost:3000/ at this route it serves the /app content which is like a home page.

There are different ways of using the routing in Nextjs according to the requirement.

1. Route groups ( ) -

2. Dynamic Segment [ ]

3. Catch-all Segment [… ]

1. Route groups is represented by parantheses it allow you to create grouped routes that do not affect the URL path.

   for example - if the folder structure is like /app/(auth)/signin,signup that means when we go to Url like http://localhost:3000/signin, http://localhost:3000/signup then it works fine without the using auth in middle because use of ( ) route group.

2. Dynamic segment is represented by square brackets [ blogID ] inside it dynamic parameter is there like /blog/1, /blog/2.

   for example - let say currently the project folder is like /app/blog/[blogID] like that it means in the url after the /app/blog route is dynamic and we can access this route via params inside the component.

   But it handle only one dynamic segment therefore we need of Catch-all segment .

3. Catch-all segment is represented by square brackets with three dots inside it [ …parameter ] in which the parameter is an array that handling multiple segments in the url.

   for eg - if the folder structure is like /app/user/[…info] that means the url can have anything after/app/user and can be multiple segments also like http://localhost:3000/user/name/firstname,

   http://localhost:3000/user/gdhhd/ehkuhd/4y74bjd/373 like things and we can also access this route via params but that will be in array formate like here that will be - [“gdhhd”, “ehkuhd“, “4y74bjd“, “373“].