Add the SliceZone to your project

The Slice Zone component is used to insert your component libraries in to the page. You can learn more about how exactly it works here.

Create a [uid].js file in your page folder

Create a new [uid].js file at the root of your page folder that will dynamically generate pages with the different components.

Import the necessary dependencies in your [uid].js file

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.

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
9 Rue de la Pierre Levée, 75011 Paris