Reviews

Comment

Slices are meant to be website sections that content editors can stack on top of each other, reorder and fill with content in order to build pages rather than to be used as smaller components.

Comment

Make sure you always have screenshots for each slice variation as they help content editors a lot. You can upload a custom image in Slice Machine.

Comment

We recommend as much as possible to rely on variations instead of config fields, this way designers make choices early on instead of letting editors decide on combinations of design options.

Relying on variation gives options and flexibility to content editors without giving them capacity to mess with designs.

Finally it also allows to reduce the number of slices. (note that you can also make the fields vary between two variations of a slice)

Comment

You can query other APIs, pass additional data to the slices or expose external data to your Prismic repository.

Context prop

The context prop of the <SliceZone/> component (if using the page router) enables you to pass arbitrary data to slices.

Direct Query

In some cases you can query the data directly from your slice component.

Integration field

The integration field to expose external data to your prismic repository. Editors will be able to browse the field catalog and select the item they want to use.

Next.js

Slice zone documentation for Next.js.

Nuxt.js

Slice zone documentation for Nuxt.

SvelteKit

Slice zone documentation for Sveltekit.

Comment

Make sure your Prismic packages are up to date especially Slice Machine.

Comment

You can pass custom UI components for each RichText formatting option through the components property of <PrismicRichText /> .

You can also create an htmlSerializer file to customize the RichText globally or create a wrapper like in this Next.js project.

Comment

Using custom labels allows content editors to apply labels to specific strings in a RichText field. You can apply specific styling for this label from your app.

Comment

The Prismic client has content helpers, and isFilled allows checking if a field is filled.

Comment

Having the React/Vue components in the slices/SliceName/ folder is necessary to validate the project. Not having or importing them means some features, like the Slice Simulator and the live preview in the Slice table, won't work properly.

Comment

For building links, we recommend using the route resolver instead of the link resolver. This is an API option that you pass to the Prismic API client.

With the route resolver, the URL of each document will be included in the API response for each query.

Next.js

Building routes in Next.js

Nuxt.js

Building routes in Nuxt

SvelteKit

Building routes in Sveltekit

Comment

Using the Slice Simulator allows you to quickly iterate on your slice locally and test the content editing experience you'll provide to content teams.

Additionally, this is necessary so editors can benefit from slice live previews and various AI features in the page builder.

Next.js

Live previews for Next.js

Nuxt.js

Live previews for Nuxt

SvelteKit

Live previews for Sveltekit

Comment

You can use a content relationship to build nested routes with parent documents or reuse existing content.

You can restrict a content relationship field to specific types.

Comment

Responsive views: When you need to allow content editors to upload an Image for different devices, we recommend using the responsive views embedded in the Prismic Image field. This way, all image sizes will be generated on the fly when an editor selects an image from the media library. They can override it if necessary with other images.

We recommend setting at least the main view dimensions to prevent editors from cropping the image.

Comment

Slice Machine generates TypeScript types for your models on the fly.