Reviews

Next.js

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.

Next.js

Slice Variations: 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 a lot of variation gives options and flexibility to content editors without giving them capacity to mess around 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)

Next.js

You can pass additional data to the slices by using the context prop or integration fields

Context prop

The context prop of the SliceZone component (if using the page router), the context prop is then available in all slices components : https://prismic.io/docs/technical-reference/prismicio-react#slicezone.

If you’re using the app router, you can query the data directly in your slice

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.

Nuxt.js

You can pass additional data to the slices by using the context prop of the SliceZone component, the context prop is then available in all slice components or you can use the integration field to expose external data to your prismic repository

Next.js

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.

Next.js

Templating Prismic data into React : Our prismicio/react kit offers you various components to template Prismic fields into React components like PrismicText, PrismicRichTextOur prismicio/next kit gives you some extra components designed specifically for NextJs : PrismicNextImage and PrismicNextLinkPrismicNextImage allows you to automatically optimize images served by Prismic with Next.js

Nuxt.js

Templating Prismic data into Vue : Our prismicio/vue kit offers you various components to template Prismic fields into Vue components. The kit is injected by the Nuxt-Prismic module. https://prismic.nuxtjs.org/guides/basics/templating-content

Next.js

You can pass styling configuration for each type of RichText component through the components property of the <PrismicRichText /> using a serializer.

To customize the RichText globally, we recommend to create a wrapper (checkout the example wrapper in our documentation.

Next.js

Using custom labels this would allow a content editor to apply a label to a specific string in a RichText. You can then apply specific styling for this label from your app.

Next.js

Prismic Client contains helpers, isFilled allows to check if a field is filled. https://prismic.io/docs/technical-reference/prismicio-client#helper-functions

Next.js

Using the React/Vue components that are in the slices/SliceName/ folder is necessary to validate the project, not using that means some feature like the Slice Simulator and the live preview in the table of slice won't work properly.

Next.js

For building links we recommend to use the route resolver instead of the link resolver, it's an API option that you pass to the Prismic API client : https://prismic.io/docs/define-paths-nextjs With the route resolver, for all queries you'll get the url of each document in the url field of the API response for the document.

Nuxt.js

For building links we recommend to use the route resolver instead of the link resolver, it's an API option that you pass to the Prismic API client : https://prismic.io/docs/nuxt-3-define-routes

Next.js

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

Additionally this is necessary to benefit the new page builder's live rendering of slices.

Next.js

If you need to reuse some content in another document you can use a content relationship to pull data from one document into another.

You can restrict that content relationship to certain types of documents.

You can then use the GraphQuery API option to get like 2-level nested data into a single query.

Next.js

Responsive views: When you need to allow content editors to upload a specific Mobile Image, we recommend using the responsive views embedded in the Prismic Image field. This way all image sizes will be generated on the fly when a user adds an image, and the user can override it if necessary with other images.

We recommend setting at least the main view dimensions.

Next.js

Slice Machine generates types for your models on the fly.

Check out our documentation for Next.js projects.

Next.js

On older versions of slicemachine-ui, make sure you always target the .cdn endpoint with the client : https://repo-name.cdn.prismic.io/api/v2 instead of https://repo-name.prismic.io/api/v2, this way you benefit from caching for API requests, less a problem for SSG but could reduce your build time.