Slice machine with Next.Js

Hello, I have a general question about Prismic’s Slices and Slice Machine.

I am not a technical person, I don’t know how to write code. I am the product owner and I work with a developer team. They use Prismic because I asked them to do so. We use Next.Js on the front end side.

I recently received an email that introduced Slice Machine, which seems like a huge improvement for Prismic users. However, I want to be sure I understand what it does for me as a product owner and content editor.

This is how I understand it works and how it is different from the previous version:
I am a content editor and I ask the dev team to create a new URL on my site and connect it with Prismic Slice Machine. After this connection is established, I am able to add any page elements (slices) to this page. In essence, the dev. team will not have to manually update each page (URL) depending on its content.

So I can have 5 different pages with 5 different contents (1 with a picture, another without a picture, one with 2 testimonials and one without any, these pages does not have to have the same slices and the same fields). The only thing the dev team has to do is to add the new URL to my site.
Is this correct? And this is different because before the Slice Machine, each slice had to be connected with an API to the page so it required a lot more work from the dev team.

Please let me know if I understand correctly.


1 Like

I’m not familiar with your specific setup, but I’m pretty sure the dev team will not even have to generate a new URL, as that’s all done on the Prismic side.

Your dev team would have to create any custom slices you want to use initially, and after that it should all be very hands-off from their perspective.

Please note that SliceMachine only works with Vue and Nuxt (not Next.js) currently.

Thank you for your answer. Could you tell me when will SliceMachine work with Next.js?

Hey @no-reply,

we’re about to release SliceMachine for Next.js!
It’s super early but you can try it out by running:

npx prismic-cli@alpha sm --setup --framework next

You will then need to create a pages/[uid].js file, pretty much like I did here:

Note that some arguments will change in the coming days but I’ll make sure to notify you here :slight_smile:

Also, if you want to get a Storybook configured to render your slices, first create a slice from the CLI:

npx prismic-cli@alpha sm --create-slice --framework next

and then, run:

npx prismic-cli@alpha sm --add-storybook --framework next

More info about the (wip) Next SliceZone:

More info about the Storybook RFC:

Hope it gets you started smoothly!
Feel free to ping me if you need help

1 Like

This issue has been closed due to inactivity.