RFC: Port SliceZone to Next.js

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, 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.

import { Client } from '../prismic'
import SliceZone, { useGetStaticProps, useGetStaticPaths } from 'next-slicezone'


const Page = ({ uid, registry, slices }) => (
  <div>
    <h1 className="title">
      Welcome to page "{uid}"!
    </h1>
	<SliceZone registry={registry} slices={slices} />
  </div>
)

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

[hypervillain]

I’ll add a section regarding scan & match. I’ve described how the filesystem is scanned here in the meantime: https://github.com/prismicio/slice-machine/tree/master/packages/vue-slicezone#auto-match-components

[sadache]

@hypervillain also can you please add (for context) an example of the syntax for declaring a SliceZone in a Next page? 🙏