Creating dynamic and nested routing in Next.js

Question

I have these routes in a React App:

<Route path="/blog" element={< Blog />} />
<Route path="/blog/:slug" element={<BlogPost />} />
<Route path="/blog/search" element={<Blog pageType="search" />} />
<Route path="/blog/category" element={<Blog pageType="category" />} />
<Route path="/blog/author" element={<Blog pageType="author" />} />
<Route path="/soccer-managers" element={<SoccerManager />} />
<Route path="/soccer-managers/:category/:main/:pair" element={<SoccerManager pageType="show" />} />
<Route path="/soccer-managers/alternatives" element={<SoccerManager pageType="alternatives" />} />
<Route path="/soccer-managers/comparisons" element={<SoccerManager pageType="comparisons" />} />
<Route path="/soccer-managers/export" element={<SoccerManager pageType="export" />} />
<Route path="/soccer-managers/reset" element={<SoccerManager pageType="reset" />} />
<Route path="/soccer-managers/search" element={<SoccerManager pageType="search" />} />

Basically, I have 3 Components: Blog, BlogPost, SoccerManager and I am reusing both Blog and SoccerManager by just changing the output depending on the pageType and url. So for example, SoccerManager will filter its rendering in almost all routes depending on pageType which comes associated by the url. If there is not pageType because the url is /soccer-managers it will just not filter anything and show all the output.

And this one route is trickier:

<Route path="/soccer-managers/:category/:main/:pair" element={<SoccerManager pageType="show" />} />

Here I reuse the SoccerManager component and if it has a pageType = show then I will fetch the url elements, for example:

/soccer-managers/comparisons/city/liverpool

And just display the output of these 2 in a comparison environment.

Now, I want to change it to Next.js and the routing works differently and I cannot wrap my head around it. I feel I would need to do something like:

--> soccer-managers
   --> index.js (this will be the <SoccerManager /> without pageType
   --> alternatives
       --> index.js (this will be the <SoccerManager /> with pageType = alternatives
   --> comparisons
       --> index.js (this will be the <SoccerManager /> with pageType = comparisons
   --> export
       --> index.js (this will be the <SoccerManager /> with pageType = export
   --> reset
       --> index.js (this will be the <SoccerManager /> with pageType = reset
   --> search
       --> index.js (this will be the <SoccerManager /> with pageType = search
---> blog
   --> index.js (this will be the <Blog /> without pageType
   --> [slug].js (this will be the <BlogPost />
   --> author
       --> index.js (this will be the <Blog /> with pageType = author
   --> category
       --> index.js (this will be the <Blog /> with pageType = category
   --> search
       --> index.js (this will be the <Blog /> with pageType = search

Would this be the right way to do it? It feels I am repeating myself so much so any guidance on how to do it properly would be appreciated.

Also, regarding this route:

<Route path="/soccer-managers/:category/:main/:pair" element={<SoccerManager pageType="show" />} />

I don't know how to create it properly so any advice would be welcome as well.

Thanks!

madze madze · Accepted Answer · 2022-07-28T23:50:37

I think for next.js routing, if you want to have those variables in the path you will need to nest files for them the way that you are for blog/[slug].js

However, you could alternatively solve this using query params instead in which case you could have just one SoccerManager route component. and take in the query options as parameters in the url:

e.g. /soccer-managers?category=[category]&main=[main]

These parameters would then be available from the next.js useRouter hook like this:

const {query} = useRouter()
const {category, main} = query

Creating dynamic and nested routing in Next.js

1 Answers