Turn your design into Slices

Setup Slice Machine


[00:00] Now you've got a basic Next.js project. We'll need to get it configured to start using Slice Machine. Luckily, this only means running a single command:

npx @slicemachine/init@latest

[00:07] This command will do the following for you:

[00:10] - Create a new Prismic repository or let you specify an existing one.

[00:14] - Add a Slice Machine script to the package.json.

[00:17] - Create a slicemachine.config configuration file containing your API endpoint and the location of your Slice library. - Create a prismicio file to configure Prismic.

[00:29] - Create a slice-simulator file used as an environment to test Slices. - Detect your framework Next.js and install necessary dependencies.

[00:37] What do these dependencies do for you?

[00:40] - Prismic/client is responsible for fetching data from the Prismic API.

[00:44] - Prismic/React renders data from Prismic as React components.

[00:48] - Prismic/Next enables the content previewing functionality.

[00:52] - Slice machine UI is the local development tool for building slices.

[00:56] - Slicemachine/adapter-next configures Slice Machine to work with Next.js.

[01:00] To start Slice Machine, after installation, run npm run slicemachine in a new terminal tab or window.

[01:06] If you see the following screen, you're good to go and move on to the next step.

Install & Launch Slice Machine

In the root of your Next.js project, install Slice Machine with the following command:

npx @slicemachine/init

Start Slice Machine with the following command:

npm run slicemachine

Answer to continue

Quiz banner

Do you see the Slice Machine homepage?

What does @prismicio/client do?