Add the SliceZone to your project
The Slice Zone component is used to insert your component libraries in to the page. Adding the power of Slicemachine where you need it.
Create a new [uid].js file at the root of your page folder that will dynamically generate pages with the different components.
You can add the Slice Zone component to a new page called [uid].js by adding the following code, here we have specified this Prismic custom type 'page' and this page's route will dynamically be populated by the URL.
Copy
import { Client } from '../prismic'
import SliceZone from 'next-slicezone'
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks'
import resolver from '../sm-resolver.js'
const Page = (props) => <SliceZone {...props} resolver={resolver} />
// Fetch content from prismic
export const getStaticProps = useGetStaticProps({
client: Client(),
uid: ({ params }) => params.uid
})
export const getStaticPaths = useGetStaticPaths({
client: Client(),
type: 'page',
fallback: true,// process.env.NODE_ENV === 'development',
formatPath: ({ uid }) => ({ params: { uid }})
})
export default Page