Query several page_type from the same [uid] route in Next.js app router

[y.coumes-gauchet (Yoann Coumes-Gauchet)]

Hi Prismic Community and Prismic team!

I'm using Next.js v14 app router and Prismic Slice Machine v2, and try to solve this problem:

1. I want to address my writer experience with several page_type: one for content creation (page_content) and one for marketing pages (page).

2. I want to use Catch-all from Next.js to be able to create a hierarchy url (grand-parent/parent/page) working with a parent (content relationship field, and iterating on it).

3. And the most important: I want to query these page_type from the same app/[uid]/page.tsx, so I can keep flexibility about SEO url pattern, apply different styling between page types, and keep it clean for the writer with proper page_type with selected slices.

My first try was to use Next.js Route Groups, but as it should, app/[uid]/page.tsx and app/(route_group)/[uid]/page.tsx create a conflict, because at the end it's the same url.

So I suppose I need to customize a bit more the page snippet Prismic gave us from the Slice Machine, to query both page_type in parallel (hopping not degrading too much the performance), and address a king of subPages depending on the page_type it returns.

I read a blog post about slice library best practices from @samuelhorn that was very interesting, and he gave a good solution to split slice variation into subfolders, keeping the slice component a server component, and just addressing the right variation with next/dynamic.

So I was wondering if someone has ever experience the same issue, and how to address it of course, but more important: what best practices implement like @samuelhorn did for slice variations, to keep my app router clean addressing this?

Thanks!
Yoann

[Phil (Phil Snow)]

Hi @y.coumes-gauchet ,

This thread addresses some similar concepts but we don't recommend such a strategy because of conflicts like you've suggested:

How to get by UID without defining the Page Type?

Hey @aadtyaraj01, This goes against our recommended implementation. We would always discourage users from putting two different types in the same route. I would probably make the routing structure: app/hubspot/integration/zapier app/hubspot/error/syncing-contacts However, if that's not an option, there are some potential workarounds. As you've observed, there is no way to query a document by its type without specifying the UID. The most obvious workaround in my mind would be to use a try/c…

I would recommend using the route resolver and the URL property returned from your documents using this.

Route Resolver

[y.coumes-gauchet (Yoann Coumes-Gauchet)]

Thank you very much @Phil for your insights! I will keep the right way, and so to avoid it and use the route resolver. A bit more work on creating more page_types on the demand, instead of a more flexible way of defining pages and its parents, but I don't want to set the ground for future bugs. Thanks!