Next.js nested dynamic routing with specific settings page for each route

Question

I have a web application built using Next.js and TypeScript. This application can display an unlimited number of nested paths, for example:

/groups/sports/team-sports/football educations/primary school/class/group/preschool/kids /member/high school/teacher/mathematics/algebra The first part of the path is the main category, and the following parts are subcategories. These paths all show the same page design, but with different data.

I want to add a new page like "Settings" at the end of these paths, for example:

/groups/sports/team-sports/football/-/settings educations/primary school/class/group/preschool/children/-/settings /membership/high school/teacher/math/algebra/-/people How can I make this so that the Settings page shows the settings page?

Answer 1

In your pages folder, create a file called [...settings].js and affect it to the page where you want the settings to appear.

• But you should be careful because the data separating the settings you want to display only comes from the URL.