2 levels nested routing in nextjs

Question

I carefully read the docs of next routing system. It only mentions that I could achieve dynamic routing like this:

http://localhost:3000/level1/dynamicSlug

But I am trying to achive something like this:

http://localhost:3000/level1/level2/dynamicSlug

And I want level2 to be created dynamic too.

you can simply create the folder structure like level1 -> level2 in page folder — Wasif
– Wasif, Commented Aug 25, 2019 at 18:40
@Wasif thanks you very much, but what I should do if I want that "level2" is dynamic, sorry my English — Cuong Hoang
– Cuong Hoang, Commented Aug 25, 2019 at 18:42
what do you want to achieve localhost:3000/level1/dynamicSlug1/dynamicSlug2? — Wasif
– Wasif, Commented Aug 25, 2019 at 18:45
@Wasif I want to have that level2 also dynamic, not by simply create a level2 folder, because data from backand reuqires level2 to be create dynamic — Cuong Hoang
– Cuong Hoang, Commented Aug 25, 2019 at 18:47
you can check out this github.com/zeit/next.js#custom-server-and-routing hope that helps — Wasif
– Wasif, Commented Aug 25, 2019 at 18:58

EmirCanSANCAR · Accepted Answer · 2020-07-16 13:40:03Z

30

It is possible to do nested scenarios according to your request in this way. for example:

pages/
  level1/
    [dynamicSlug]/
      - index.js           // will match for /level1/1234
    level2/
      - index.js           // will match for /level1/level2
      - [dynamicSlug].js   // will match for /level1/level2/1234

Or

pages/
  level1/
    [dynamicSlug]/
      - index.js           // will match for /level1/1234
    level2/
      - index.js           // will match for /level1/level2
      [dynamicSlug]/
        - index.js         // will match for /level1/level2/1234

answered Jul 16, 2020 at 13:40

EmirCanSANCAR

4094 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

financial_physician Over a year ago

I believe my question is a follow up to this. If you could give it a look I'd be forever grateful

Ovais Oozeer · Accepted Answer · 2021-11-17 10:59:31Z

5

I know this is a bit of an old post, but I'd just like to share my working response with NextJS v11.

I want dynamic routing at two levels. E.g.:

{siteroot}/dynamicPage
{siteroot}/dynamicUrlSection/dynamicPage

My folder structure is:

/pages/[section]/[page].tsx
/pages/[section]/index.tsx

This way, the "dynamicPage" path at the root is handled by index.tsx, and nested routes are handled by [page].tsx

BONUS INFO: I am working with Contentful as a CMS. I use a single content model for all the pages at both levels. The model has "section" and "page" properties. The entries that serve the root dynamic pages (i.e. /pages/[section]/index) have a compound value in the "page" property of {section}-index. I then have to be a bit smart in my client code:

if (!page) {
  page = `${section}-index`;
}

await fetchData(section, page);

answered Nov 17, 2021 at 10:59

Ovais Oozeer

511 silver badge1 bronze badge

1 Comment

Jake Over a year ago

Thank you. The docs don't seem to mention the ability to name folders with the[slug] for these kinds of routes.

felixmosh · Accepted Answer · 2020-10-05 14:09:36Z

4

You have 2 choices:

Using v9 Dynamic Routing by calling the folder as [dynSlag] and putting your page file inside.
Using custom server and routing, you will need to define a custom server, map your path to a specific next page.

edited Oct 5, 2020 at 14:09

answered Aug 25, 2019 at 19:27

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

2 Comments

Cuong Hoang Over a year ago

Thanks I find the solution just create a folder named [ippage]

dragonmnl Over a year ago

@felixmosh the 2nd link doesn't seem to work any longer

Alex198710 · Accepted Answer · 2020-07-06 21:22:48Z

2

Using the example right from the NextJs documentation, I use this hack, maybe you could use it.

<Link href="/posts/[id]" as={`/posts/${subFolder}${id}`}>

"as" will have a value like /posts/nested_subfolder_file.md

And in the getPostData function, just do this little change:

  const nestedPaths = id.split('_')
  const fileName = `${nestedPaths.pop()}.md`
  const fullPath = path.join(postsDirectory, ...nestedPaths, fileName)

answered Jul 6, 2020 at 21:22

Alex198710

911 silver badge2 bronze badges

Comments

Loïc Boset · Accepted Answer · 2023-11-02 20:33:59Z

I managed to have something working for my use case (rest API): http://localhost:3000/api/articles/1/highlights/2

Folder structure:

- articles
  - index.ts
  
  - [article_id]
    - index.ts
    
    - highlights
      - index.ts
      - [highlight_id].ts

[article_id]/index.ts file

import type { NextApiRequest, NextApiResponse } from "next";

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  const { article_id } = req.query
  return res.status(200).json(`article: ${article_id}`);
};

export default handler;

highlights/[highlight_id].ts file

import type { NextApiRequest, NextApiResponse } from "next";

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  const { highlight_id } = req.query
  return res.status(200).json(`highlight: ${highlight_id}`);
};

export default handler;

Collectives™ on Stack Overflow

2 levels nested routing in nextjs

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related