All Technologies / Next.js / Add the SliceZone

Add the SliceZone to your project

Beta

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.

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