# Next js - Nested dynamic route \[abc\]/\[xyz\]

**URL:** <https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [April 18, 2023, 1:23pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919 "2023-04-18T13:23:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)\
**Post date:** [April 18, 2023, 1:23pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/1 "2023-04-18T13:23:25Z")

</div>

Hello,

I would like to create custom types for nested dynamic route with Prismic & Next js.

How could I do such a thing?

For instance custom type named "mother page" and "child page"  
mother page: [xyz.com/fruits](http://xyz.com/fruits)  
it's child page apple : [xye.com/fruits/apple](http://xye.com/fruits/apple)

Both page would be done dynamically through Prismic.

Correct me if I am wrong, but I do not think that I have found a part of documentation addressing this use case?

Thanks!

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [April 18, 2023, 6:43pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/2 "2023-04-18T18:43:46Z")

</div>

You can use the route resolver with Content Relationship fields.

Firstly, you would need to create a custom type for your "mother page" and another custom type for your "child page". In the "mother page" custom type, you can create a Content Relationship field that links to the "child page" custom type.

In your Next.js project, if your "mother page" has a UID of "generation-xyz", and your "child page" has a UID of "apple", the URL would be "/generation-xyz/apple". You can use the route resolver to map this URL to the appropriate page template and fetch the data for that page from Prismic.

This use case is not explicitly covered in the Prismic documentation, but it is a common pattern for creating nested dynamic routes with Content Relationship fields.

Here's the document for the Route Resolver:

> **[Route Resolver](https://prismic.io/docs/route-resolver)**
>
> Learn what the Route Resolver is and how to use it in your project.

And its technical reference:

> **[Route Resolver API Option Technical Reference](https://prismic.io/docs/route-resolver-api-option#example)**
>
> Generate URLs with the Route Resolver.

---

<div class="post-metadata">

**Author:** ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)\
**Post date:** [April 19, 2023, 11:45pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/4 "2023-04-19T23:45:21Z")

</div>

Thank for the reply!

Do you have any showcase repository using such?

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [April 20, 2023, 3:55pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/5 "2023-04-20T15:55:43Z")

</div>

At this time, we don't have a sample replicating for such usage. However, I can add your request as a suggestion for future updates to our example project.

---

<div class="post-metadata">

**Author:** ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)\
**Post date:** [April 21, 2023, 11:59pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/6 "2023-04-21T23:59:21Z")

</div>

Yeah please, add it for future example project!

What I do not understand is that the "mother page" generation-xyz will have multiple child\_page.

generation-xyz/abc  
generation-xyz/cdb

So why am I doing a content relationship on the mother page and not the child page?

Isn't this the way to go in the routes:

```auto
  {
    type: 'mother_page',
    path: '/:uid'
  },
  {
    type: 'child_page',
    path: '/:mother_page_page_uid/:uid'
  }
]

```

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [April 24, 2023, 3:35pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/7 "2023-04-24T15:35:50Z")

</div>

You need to add the resolvers so it can identify the UIDs of the linked parent document: [Route Resolver API Option Technical Reference - Documentation - Prismic](https://prismic.io/docs/route-resolver-api-option#resolvers)

---

<div class="post-metadata">

**Author:** ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)\
**Post date:** [April 25, 2023, 11:48pm UTC](https://community.prismic.io/t/next-js-nested-dynamic-route-abc-xyz/12919/8 "2023-04-25T23:48:20Z")

</div>

Thank you Pau. I'll dive into it