CODEWITHSUNDEEP
typescriptapiurlreact-routernext.js
Mahmud Abdur Rahman Toki
Mahmud Abdur Rahman Toki

Reputation: 25

How to achieve dynamic url tree in NextJS

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 -

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.

Upvotes: 1

Views: 1144

Answers (1)

Santeri Sarle
Santeri Sarle

Reputation: 1001

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.

Upvotes: 1

Related Questions