Quick start
Before you start
To use Slice Machine you will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal. If you need to update, we explain how here.
This short, one page crash course is aimed to get your project running ASAP and it's designed for experienced Devs.
Need a more detailed guide?
If you need a more detailed guide, then check out our Step by Step tutorial.
Install the latest BETA version of the Prismic CLI. (Check your version by running prismic --version and compare it to the latest version released on npm) You can do that by running the following command:
- npm
- yarn
npm install -g prismic-cli@3.8.3-beta.0
yarn global add prismic-cli@3.8.3-beta.0
If that doesn't work try using sudo.
- npm
- yarn
sudo npm install -g prismic-cli@3.8.3-beta.0
sudo yarn global add prismic-cli@3.8.3-beta.0
So wait…what’s Prismic?
There’s every chance that you’ve made it this far without knowing what Prismic is. We’re slightly offended, but we’ll get over it.
Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. You should really check it out.
Create a new next project
- npm
- yarn
npx create-next-app my-new-app && cd my-new-app
yarn create-next-app my-new-app && cd my-new-app
Now you can run the Slice Machine setup command to configure your project.
prismic sm --setup
This command will ask you to create a new Prismic repository and configure your next project to work with your newly created Prismic repository
This also added as a dependency a cool set of open source components for your project that you can see here or contribute here.
Create a new [uid].js file at the root of your page folder that will generate dynamically page 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.
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
You're now ready to start your Next project. Simply run the following command and follow the link to your localhost.
- npm
- yarn
npm run dev
yarn dev
You can now visit http://localhost:3000/test to see the empty Slice Zone.

You can now visit your newly created repository by following the button in the empty SliceZone or going to https://prismic.io/dashboard.
Slice Zone. Where the magic really starts.
The Slice Zone is a custom component that we created to be the entry point on your pages for all your components. It’s where any components you’ve created or any components libraries that your are using are added to the page. It also automatically queries your Prismic repo, so less work with BIG results. There’s lot’s more you can do with the Slice Zone, check out the docs.