Hi @mark ,
It sounds like we can break this down into a few steps.
In Next.js, you would include these pages:
src/
└── pages/
└── [category]/
├── index.js
└── [product].js
So we're discussing src/pages/[category]/index.js and src/pages/[category]/[product].js, but for the sake of brevity I'm going to call these files [category]/index.js and [category]/[product].js.
There are three steps for creating your routes:
Step One: Querying for a category page
So, [category]/index.js is your category page. On this page, you'll use the "Query by Content Relationship" that I described above to get an array of all of the products of a given category. That's where you'll use code that looks like this:
const { id } = await client.queryByUID('category', route.category) // route.category is a stand-in for however you access your route params
const products = await client.query('my.document.category', id)
So, when a user navigates to /category/light, you will query all of the "light" documents, receive an array, and render it.
Step Two: Querying for a product page
For this step, the setup is straightforward, but you can add more rigidity for more structured routing.
Basic
You can use a standard queryByUID using the product variable from your dynamic route. Because the product UIDs are unique, you will get the correct document without needing to worry about the category, and the route will work fine.
More rigid
The problem is that any [category] route segment will work. So, /dogs/poodle will render the poodle document, but so will /cats/poodle or /foobar/poodle.
If you want to guard against that, you can add a client-side check to double check the UID of the category. The document that you get back will have a property document.data.category.uid. You can check if document.data.category.uid matches router.query.category (the category route segment). If it doesn't match, you can forward to a 404 instead of rendering.
Step 3: Create a route resolver
For a nested route, we recommend using a route resolver. It gives you lots of control over how to construct your internal links. The Route Resolver is available as a config option in Nuxt.js and Next.js projects and as an API option for all other projects — though the fundamental syntax is the same everywhere. For you, it would look something like this:
{
type: 'product',
path: '/:category/:uid',
resolvers: {
category: 'category' // id of the content relationship in the article mask
}
}
Here's the documentation for the Route Resolver in Next.js.
With the Route Resolver in place, the Prismic helpers — like Prismic's <RichText/> and <Link/> components — will construct links using the category and product UID.
I hope this is helpful! I realize that it's more detail than you asked for, but I just wanted to make sure I didn't miss anything. Please let me know if this is helpful. If not, I'm happy to keep helping with troubleshooting and debugging.
Sam
