How to achieve dynamic url tree in NextJS

user_13081168 0
Viewed 415

From what I understand from nextjs routes -

blog->[id].jsx gives "blog/1", "blog/2" etc.

But I want to achieve page-subpage-subpage kind of url tree where each page can have subpages & subpages can have further subpages. So url's may look like these -

"page/sub-page/sub-sub-page" etc.

I'm using django treebeard in backend, so pages & subpages urls are all dynamic & comes from API calls. Currently I tried with the below structure -

  • pages/

    • index.js

    • [slug].js

It only gives me ability to fetch only level one pages. I want to acquire multi-level page access.

Anybody ever did it? Please help.

react-router typescript next.js url api
1 Answers

The URL tree is based on the folders and files in your pages-folder, so you can simply add folders and files to make the tree you need. For example, a blog could have a structure of folders and files like this:

  • pages/
    • index.js (blogsite.com)
    • blog/
      • index.js (blogsite.com/blog)
      • [id]/
        • index.js (blogsite.com/blog/123)
        • comments/
          • index.js (blogsite.com/blog/123/comments)
          • [commentId].js (blogsite.com/blog/123/comments/321)

EDIT BASED ON COMMENTS:

I missed that the asker actually meant that they don't know the depth of their tree beforehand. In this case you can use a catch all route like [...id] and the page will get all of the parameters that exist in the query-object.

user_154309250
Related