# Slice machine with Next.Js

**URL:** <https://community.prismic.io/t/slice-machine-with-next-js/641>\
**Category:** Developing with Prismic\
**Tags:** slice-machine\
**Created:** [June 2, 2020, 5:20pm UTC](https://community.prismic.io/t/slice-machine-with-next-js/641 "2020-06-02T17:20:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![no-reply](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/no-reply/32/313_2.png) [@no-reply](https://community.prismic.io/u/no-reply)\
**Post date:** [June 2, 2020, 5:20pm UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/1 "2020-06-02T17:20:12Z")

</div>

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.

Thanks

---

<div class="post-metadata">

**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\
**Post date:** [June 3, 2020, 6:06am UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/2 "2020-06-03T06:06:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![no-reply](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/no-reply/32/313_2.png) [@no-reply](https://community.prismic.io/u/no-reply)\
**Post date:** [June 3, 2020, 11:19am UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/3 "2020-06-03T11:19:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hugo.villain](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/hugo.villain/32/186_2.png) [@hugo.villain](https://community.prismic.io/u/hugo.villain)\
**Post date:** [June 19, 2020, 11:28am UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/6 "2020-06-19T11:28:33Z")

</div>

Hey @no-reply,

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

```bash
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: [https://github.com/prismicio/sm-next-app-example](https://github.com/prismicio/sm-next-app-example)

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

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

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

```

and then, run:

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

```

More info about the (wip) Next SliceZone:

> **[prismicio/slice-machine](https://github.com/prismicio/slice-machine/tree/master/packages/next-slicezone)**
>
> Common utilities to build Slice Machine libraries. Contribute to prismicio/slice-machine development by creating an account on GitHub.

More info about the Storybook RFC:

> <https://github.com/prismicio/slice-machine/issues/13>
>
> Setup a Storybook project
> Run prismic sm --add-storybook --framework \[nuxt/next\] to setup a Storybook, configured to preview your local slices. It should...

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

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [September 21, 2020, 4:36pm UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/7 "2020-09-21T16:36:43Z")

</div>

This issue has been closed due to inactivity.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 6:02pm UTC](https://community.prismic.io/t/slice-machine-with-next-js/641/8 "2021-12-09T18:02:13Z")

</div>


