Next.js App Router Routing patterns you should know
The simplest pattern is just to create a directory inside the app folder with the route name and at that directory create a page.tsx file.
We want to navigate to a post by its id, for this, we will need to create a dynamic route. For that just create a directory with the square brackets and the name of the param inside and a page.tsx file inside that directory as follows:
To catch all routes from a directory except for the root of that directory’s route, we can use the Catch All pattern. We will add a directory with the [...slug] bracket and 3 dot annotation, the slug will be our route param in the params props, and we’ll add our page.tsx file to that directory:
When we navigate to /catch-all we’ll get a 404 page, however, to /catch-all/next/page/etc you’ll get the page rendered as expected with array of params in the json.
The second pattern allows us to catch the root’s directory also. So we’ll create a directory with the [[...slug]] double brackets and 3 dots annotation, adding page.tsx to that folder:
