NextJS 13.4 App Router sub pages

Having trouble determining the best route forward for setting up something like the following structure

  • / = Single type :white_check_mark:
  • /about = Repeatable type or single?
  • /about/the-team = Repeatable?

If I understand correctly, we should create a custom type for the about pages?

If I do that, and create a route in Next with /about/[slug]/page.tsx it renders /about and /about/about as the same page. It also doesn't throw a 404 if a document is not found for /about/broken for example What am I missing?

This is what my routes look like in Next.

 {
    type: "homepage",
    path: "/",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "about",
    path: "/about/:uid",
  },

You don't necessarily need to create an individual custom type for the "About" section. Instead, you can create a page document with the UID "about", to represent the "About" page. Then the UID could be something else.

  {
    type: 'page',
    uid: 'about',
    path: '/about/:uid', // This could be /about/us 
  },

The other option could be to treat the About page as any other subpage of "page" in this same path

  {
    type: "page",
    path: "/:uid",
  },

Thanks @Pau - I'm just trying to find a way to dynamically build multi-layer pages.

Something like this. Is it possible with one repeatable type? I'm finding it hard to find anything in the docs.

  • /
  • /about
  • /about/team
  • /about/careers
  • /support
  • /support/terms

You could create fixed routes for each UID, you can define them individually in your route resolver configuration.

Here's an example:
// If uid = team then path would be /about/team, and so on.

const routes = [
  {
    type: 'page',
    uid: 'homepage',
    path: '/',
  },
  {
    type: 'page',
    uid: 'about',
    path: '/about',
  },
  {
    type: 'page',
    uid: 'team',
    path: '/about/team',
  },
  {
    type: 'page',
    uid: 'careers',
    path: '/about/careers',
  },
  {
    type: 'page',
    uid: 'support',
    path: '/support',
  },
  {
    type: 'page',
    uid: 'terms',
    path: '/support/terms',
  },
];

A better option could be to create a Resolver to link to a category document. This would involve creating an additional custom type

1 Like

I see what you did there, and I think that would work. But if I wanted to capture all under an /about like /about/[slug] would using a Resovler do the trick?

Ok, I think I got it working with the below, and adding a content relationship field.

{ type: "page", path: "/:uid" },
{ type: "subpage", path: "/:page/:uid", resolvers: { page: "parent" } },

Now if I navigate to a route that's not there, instead of getting a 404, I get the following error.

Yes, if everything can go under /about then the solution is easier. You just need to cover that single use case:


  {
    type: 'page',
    path: '/about/:uid',
  },

Do you setup a page content relationship field in your subpage document? if not, then that is why the page isn't recognizing the :page path

1 Like

:loudspeaker: Hey everyone!

Check out our latest blog post with updates on the Next.js app router and Prismic integration.

Happy coding! :computer::rocket: