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

Developing with Prismic
1

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
it's child page apple : 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!

2

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:

And its technical reference:

4

Thank for the reply!

Do you have any showcase repository using such?

5

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.

6

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:

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

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

8

Thank you Pau. I'll dive into it

1 Like