All Technologies / Next.js / Getting Started with Slice Machine / 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 dynamical pages

Create a 〜/pages/[uid].js file that will generate pages dynamically.

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

Add the Slice Zone component to the [uid].js page by adding the following code, here we have specified this Prismic custom type 'page', and the URL will dynamically populate this page's route.

next-slicezone version

The following example uses the latest version of the next-slicezone package (0.1.0-alpha.0), which changes how values from the parameters are called. Learn more about next-slicezone's Lifecycle hooks.

To install this run npm install next-slicezone@0.1.0-alpha.0

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(),
  apiParams({ params }) {
    return {
      uid: params.uid,
    }
  },
})

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid,
      },
    }
  },
})

export default Page

Related Articles

Launch an Example Slice Machine Project

Learn how to launch and example project which has this all configured for you.

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.