Is there a comprehensive resource for using Prismic with Next? I see references to things that aren't really explained, and sources aren't even cited. For instance - In the 'Custom Routes' documentation, it references adding dynamic routes to the Routes section of your prismic.js config file. However, after stepping through all of the install documentation and whatnot, I have no prismic.js file, nor do I have a Router section listed anywhere. The example project doesn't even really indicate where these things would be either.
Hey Mark,
Can you share with me the document you're referring to?
Maybe it was a typo and this should say prismic-configuration.js the naming is arbitrary, but the file contains things like the routes array, link resolver and other small configurations needed throughout your project.
I agree though sometimes these references are dropped and could do with more information explaining them, a link to more documentation or a link to a glossary. We're actively maintaining our docs all the time so feedback like this is really useful.
Thanks.
The reference to prismic.js is here > The Route Resolver - Next.js - Prismic
Thanks, I'll update this.
The Route Resolver - Next.js - Prismic document should now be updated with the extra info. 
My configuration file looks nothing like the documentation, and the way I was able to get it to work doesn't seem to align at all with any docs. I have everything working the way I want in staticProps/Paths. I just don't know how to set up the SliceZone in my actual client-side render method. Is there a resource I can use? I have my slices folder with my components in there, but I don't know how to link the components in my slices folder to the slicezone component in my render method. Thanks!
My [category]/[uid].js file, for example:
import { client } from '../../../prismic-configuration'
import Prismic from '@prismicio/client'
import { Grid, Typography, makeStyles } from '@material-ui/core'
import SliceZone from 'next-slicezone'
import { useGetStaticPaths, useGetStaticProps } from 'next-slicezone/hooks'
import { routeResolver } from '../../../prismic-configuration'
import { SignJWT } from 'jose/jwt/sign'
const theme = makeStyles({
container: {
margin: 'auto',
},
slim: {
margin: 'auto',
maxWidth: '1200px',
}
})
const CategoryProduct = (props) => {
const product = props.product
const slices = product.data.body
console.log('prod', product)
const styles = theme()
return(
<Grid container className={styles.slim}>
<Grid item>
Stuff will go here
</Grid>
<SliceZone resolver={routeResolver} slices={slices} />
</Grid>
)
}
export const getStaticProps = async ({params}) => {
const product = await client.getByUID('product', params.uid)
console.log('product', product)
const { price, sale_price } = product.data
console.log('price', price, 'sale price', sale_price)
return {
props: {
product
}
}
}
export const getStaticPaths = useGetStaticPaths({
client: client,
type: 'product',
formatPath: (doc) => {
return {
params: {
category: doc.data.category.uid,
uid: doc.uid
}
}
}
})
export default CategoryProduct
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
Hi again Mark,
I would suggest you maybe follow our step by step tutorial which will take you through the process of creating new components and Slices from start to finish with a boilerplate project.
Any linking of components and Slices will be handled for you automatically when created this way.
Thanks.
For the record, I was following along with the documentation, but there were things being referenced that didn't exist on my end (a prismic-configuration.js file, or even the sm-resolver.js file). I'm not sure where my install deviated, but I was never able to fully recover, and since it was attached to a project I was working on, I couldn't just 'start over.'
You're totally right and it's my fault, I created these docs. I plan to add a document for 'starting from an existing project' which shows you how to manually configure all these files.
You're feedback here is really valuable as it will help me improve these docs immensely.
There only thing I can recommend right now though is to check out the sample project. Once I create the new document I'll update everyone here.
Thanks.
I've been taking a look as best I can, and trying to figure out throughout the various places where there is missing info. I totally get that this is a relatively new solution, so I'm certainly not casting aspersions.
I think with the documentation slightly more flushed out, people will really get a sense of the power and flexibility of this solution. I'm really gunning for it, and I actively try to pursue all clients to 'get in early' as it were. I think this way of doing things will really hit its stride when it becomes a bit more mature.
1 Like
I really appreciate it. I have a round of updates to do soon and this will definitely be included.
1 Like
Added to Documentation Backlog