# Slice Machine Iteration 8 June 2020 - Pull command & Next.js Support **URL:** \ **Category:** Developing with Prismic\ **Tags:** slice-machine\ **Created:** [June 10, 2020, 10:03am UTC](https://community.prismic.io/t/slice-machine-iteration-8-june-2020-pull-command-next-js-support/752 "2020-06-10T10:03:28Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![renaud](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/renaud/32/138_2.png) [@renaud](https://community.prismic.io/u/renaud)\ **Post date:** [June 10, 2020, 10:03am UTC](https://community.prismic.io/t/slice-machine-iteration-8-june-2020-pull-command-next-js-support/752/1 "2020-06-10T10:03:28Z")
We were so happy to see the feedback that we received after the release of Slicemachine. This gave us a lot of energy to continue improving the project and make it available for all of you. Our goal is to work with and for our community to improve the process of creating websites with components. In that sense, we will communicate every two weeks on the different topics that we will tackle and the one that we might need help with. **And this starts now,** For the next two weeks, we will work on two main subjects. # Porting Slicemachine to next.js ▲ We are porting Slicemachine to next.js means three things. 1. Porting the Slicezone to next.js 2. Automating the configuration of your next.js project 3. Porting the nuxt.js component to next.js We are currently working on implementing the Slicezone in next.js to replicate the behavior of the Slicezone that we created for nuxt.js. ## Slicezone for next.js You can find an RFC that will describe the work that needs to be done here for the Slicezone > > > Part of the port of SliceMachine to Next consists in porting the SliceZone. > > \#…## What's a SliceZone > > A component that matches front-end components with Prismic data components (that we call slices). You can see it as an hybrid between a "components registry" and a router: > > \- at build time, it scans and lists available components to create a custom resolver function > \- when a page hits, it fetches the corresponding content on Prismic > \- it then matches Prismic slices with components, and renders them accordingly > > \### Features > > \- Auto-fetch Prismic data > \- Auto-match components > \- Theme (via context or props) > \- Vue slots-like pattern > > \### Static export and differences with Nuxt > > Next 9.3 introduced \`getStaticProps\` to pre-render pages at build time. Instead of relying on a \`PageFetch\` wrapper component, the \`next-slicezone\` exports a \`useGetStaticProps\` function that formats arguments and returns a Next \`getStaticProps\` function. > > The Nuxt module makes use of Nuxt templating to create the resolver function. A more idiomatic way to handle such cases in Next would be to create the registry (an object with components ids and paths) at \`getStaticPaths\` call and pass it down. The SliceZone would then pick up the registry and make calls to \`loadableComponents\`. > > \### On slots > > The Nuxt SliceZone makes use of Vue named-slots. When working with external libraries like \[essential slices\](https://github.com/prismicio/essential-slices), > a common pattern is to defer part of the renderers to the user. Different solutions exist in React (notably render props pattern), and we might offer several. > > \### Example page > > This is subject to change, especially regarding how/where Prismic client is instantiated. > > \`\`\`javascript > import { Client } from '../prismic' > import SliceZone, { useGetStaticProps, useGetStaticPaths } from 'next-slicezone' > > > const Page = ({ uid, registry, slices }) =\> ( > \ > \

> Welcome to page "{uid}"! > \ > \ > \ > ) > > export const getStaticProps = useGetStaticProps({ > client: Client(), > uid: ({ params }) =\> params.uid > }) > > export const getStaticPaths = useGetStaticPaths({ > client: Client(), > type: 'page', > fallback: true, > formatPaths: ({ uid }) =\> \`/${uid}\` > }) > > export default Page > \`\`\`\` ## Our essential set of component for react In the meantime [Octahedroid](https://octahedroid.com/) nicely offered us to port or vue-essential component to react for future support of Gatsby, plain React or Next.js You can follow their progress in this repository. > **[GitHub - prismicio/essential-slices: Nicely made React components, connected to a...](https://github.com/prismicio/essential-slices)** > > Nicely made React components, connected to a Prismic backend And if you want to contribute have a look at [the different issues](https://github.com/prismicio/essential-slices/issues) # Synchronizing your content model from your repository to your code after each change ⬇ After creating a bootstrap component with the `prismic sm --create-slice` command, you will probably add a new field in the custom type builder for this component to enrich it. Our goal is to add a new command that will allow you to keep your code in sync with your custom type. You can find all details here. > > > \## Summary > > We want to add a way to synchronize your components between Prismi…c and your project. > It would be a CLI command that will scan all your slices on Prismic side and all your slicemachine components on the other side to help you create the missing ones and update the others if needed. > > \## Motivation > > The goal of Slicemachine is to have a more code-centric approach and avoid all these steps of simply synchronizing your setup on Prismic and your project. > The CLI is supposed to be here to resolve this connection and automate things for you. > > Here we face the case where you add Components from the Writing Room that is connected to all of our Slicemachine Libraries. > You can even imagine that these slices that already exists in your project might have been updated since then. > So here, it's just a quick way to resolve these cases seamlessly. > \## Scenario > Let's say that you just setup your project for SliceMachine with the following command: > \`\`\` > \> prismic sm --setup > \`\`\` > > It created 3 slices: > - CallToAction > - Banner > - HighlightItems > > At some point, you decide to change the models of \`CallToAction\` and \`Banner\` and to add a new slice called \`HelloWorld\` from the writing room. > You can use the following command to update your project accordingly: > \`\`\` > \> prismic sm --sync > > These slices were added to your project: > - HelloWorld > > Conflicts on the custom type \`page\`. > All these components already exists but their model diverge. > Select the components you'd like to update: > \[\] CallToAction > \[x\] Banner > > We successfully updated the model of: > - Banner > > Please update your implementation accordingly. > \`\`\` > > \## implementation > > \- Create a new command \`--sync\` for slicemachine that will be recognize by the CLI. > \- Gather all the models of the slices coming from the different libraries listed in \`sm.json\` > \- Fetch all the slices coming from your custom types through the CustomTypes API (see \`create-slice\` as an example) > \- Make a diff between these to identify: > - Existing slices already up to date > - Existing slices that have conflicts because of updates on the Writing room > - Missing slices that should be added to the project > \- Create the Missing Slices > \- Create an interactive way with \`inquirer\` (Already the dependency used for Prompts) to resolve conflicts and update or not the models in the code. We are happy to get any feedback on this subject and will let you know as soon as we have progress on those topics. Thanks a lot for all the energy that you're giving us, and don't hesitate to ask questions or contribute to the different topics. ---
**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\ **Post date:** [September 14, 2020, 2:04pm UTC](https://community.prismic.io/t/slice-machine-iteration-8-june-2020-pull-command-next-js-support/752/2 "2020-09-14T14:04:55Z")
We 💙 Slice Machine! ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 24, 2020, 12:58pm UTC](https://community.prismic.io/t/slice-machine-iteration-8-june-2020-pull-command-next-js-support/752/3 "2020-09-24T12:58:24Z")
---
**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:01pm UTC](https://community.prismic.io/t/slice-machine-iteration-8-june-2020-pull-command-next-js-support/752/4 "2021-12-09T18:01:21Z")