On this page, you will learn how to generate a Slice component in your Next.js project and model the content for it with Slice Machine. By the end of this page, you will have Custom Types and Slices synced between Prismic and your codebase, with one document created in Prismic.
In Prismic, content models (or schemas) are called Custom Types. Custom Types are made up of Fields (the smallest unit of content, like an atom) and Slices (groups of Fields, like molecules). You will create Custom Types and Slices in Slice Machine, the local development environment.
Before your proceed
First, you'll need a project with Next.js and Prismic. If you don't have one yet, start with the setup step.
To get started run:
npm run slicemachine
The terminal will show you a localhost link — by default, http://localhost:9999. Open it in your browser.
Create your first Custom Type
In the Slice Machine app, create a Custom Type. It might be something like “page”, “blog_post”, “homepage”, or “product.”
Custom Types are composed of a Static Zone and a Slice Zone.
- The Static Zone has fields that only appear once in a document, like a title and unique identifier (UID).
- The Slice Zone houses Slices, which are repeatable, rearrangeable sections of content — like an image, a block of text, or an FAQ.
Add your first static field by clicking "Add a new field". Once you’re done, click "Save to File System".
Create your first Slice
To create your first Slice, click "Slices" in the left-hand menu, then click "Create my first Slice". Give your Slice a PascalCased name, like TextBlock, ImageSlider, or CtaButton, and save it to your slices library. Add fields to your Slice and click "Save model to filesystem".
Now you have a directory at the root of your project called slices. Inside, you’ll find a directory for the Slice you just created. That directory contains an index.js file, which is the Slice component. It contains some starter content.
Simulate your Slice
Simulate this new Slice to see what it looks like in your development environment. Ensure your app is running:
npm run dev
Now, on the Slice editor page, click "Open Slice Simulator".
You should now see a simulated preview of your Slice with mock data.
You should have configured the Slice Simulator in the setup step. If you have trouble simulating your Slices, return to the setup step to make sure you have everything installed and configured correctly.
Code your Slice
On the Slice editor page, click the button "Show Code Snippets". These widgets include example code snippets to render Prismic’s field types. You can copy-paste them directly into your Slice component to start templating content.
Add Slices to Custom Types
Go back to the Custom Type that you created previously. Click "Add Slices" and select the Slice that you created. Then click Save "File to File System".
Push Slices and Custom Types to Prismic
You have now created Custom Type and Slice models with Slice Machine, saved locally in your project. To use Slices and Custom Types in your documents, you must push them to Prismic.
On each model, click "Push to Prismic". If necessary, you will be prompted to sign in and then click "Push to Prismic" again.
When Slice Machine is done syncing, the button will be disabled.
Sync each Custom Type and Slice.
Further learning: How Slice Machine works
Slice Machine is a powerful application. To learn more about how it works and what you can do with it, see the comprehensive guide, What Is Slice Machine?
Create your first document
Now that you have created Custom Type and Slice models, you can create content. Go to prismic.io/dashboard and click on your repository.
In the Documents tab of your repository, click the green pencil icon to create your first document.
When you’re done editing, click "Save" and "Publish". Your first document is now live.
In the next step, you’ll query content from your Prismic repository so you can start working with it in your app.
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.