Top level landing page for dynamic route

Developing with Prismic
1

Let's say I have a Custom Type of Components and a Next.js app set up to handle that routing like this:

  {
    type: 'components',
    path: '/components/:uid',
  },

... with the following folder structure:

pages/
├─ components/
│ ├─ [uid].ts

This works in the sense that I can make a Button page using that Components Custom Type and it will show up at https://awesomesite.com/components/button. However, I want a landing page for the Components page. That URL would be https://awesomesite.com/components/. I am not finding how to do that reading the docs and I do not seem to see any previous questions asked on how to do this here. I thought maybe it was creating an components/index.tsx file but then how do I create the page on Prismic?

3

Hey @frank.stallone, this can be any page inside Prismic. Then the trick is where you query and render it in the file structure of your Next project. You'd need to create a file inside pages. So it would be something like: /pages/[components].ts

1 Like
4

Pau thank you for the response! If I am reading your response correctly, all top-level landing pages can should be located at the root of /pages/ folder and if it is also a route (example being /components/[uid].tsx) then it needs to have the brackets around the file name? For example, /pages/[components].tsx not /pages/components.tsx. Does that sound correct (especially the second part)?

5

Do you want "components" to be part of the URL?
If you just need to add the UID to the URL, then your Component Custom Type must have that field. This way you can also create this path in the Route Resolver:

{
    type: 'components',
    path: '/:uid',
  },

This would be the landing page for 'components'
And yes, this field goes at the root level in the pages folder.

6

URL's we want:

  • /components for a landing page for the components.
  • /components/button/ as an example of what will be a dynamic route. We'll have, for example, /components/listmenu, and /components/checkbox, too.
9

I see. Then yes, a /components folder would be the correct thing to do. Then a [uid].js file inside of it would take care of the queries to get the documents with the UID of listmenu and button.

1 Like
10

Then yes, a /components folder would be the correct thing to do. Then a [uid].js file inside of it would take care of the queries to get the documents with the UID of listmenu and button.

I already have this working. My question was how to have this and /components. I think what I am gathering here is I need to add another route for the /components landing page and a /pages/components.tsx to query that single page. Sound right?

11

You need to also query for components at the root level in the pages folder and then handle the URLs with the route resolver. We take this approach with the /articles path in this blog sample project, you can check it out here:

1 Like