Add the SliceZone to your project


These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

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 [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