CODEWITHSUNDEEP
reactjsnext.jsroutesnext.js13
Cuong Hoang
Cuong Hoang

Reputation: 578

2 levels nested routing in nextjs

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.

Upvotes: 24

Views: 29722

Answers (5)

Loïc Boset
Loïc Boset

Reputation: 535

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;

Upvotes: 0

Ovais Oozeer
Ovais Oozeer

Reputation: 51

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);

Upvotes: 5

felixmosh
felixmosh

Reputation: 35603

You have 2 choices:

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

Upvotes: 4

EmirCanSANCAR
EmirCanSANCAR

Reputation: 409

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

Upvotes: 30

Alex198710
Alex198710

Reputation: 91

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)

Upvotes: 2

Related Questions