Prismic and Next.js 101

Seriously! What are Types and Slices?


[00:00] Prismic offers a high degree of flexibility in managing and creating website content. For instance, it offers users like our client, Mr. McDonald, the ability to add new pages when required, freeing you to focus on additional projects.

[00:13] The key to understanding how Prismic works lies in its use of 'types'. 'Types' are models or structures that tell Prismic what content can be added to a page and where. This is done with 'fields', which represent different pieces of content like text, video, or a content relationship that links to content from another type.

[00:30] If you're working on a marketing page for a farming website, for instance, and you need to add multiple instances of this page, you'll require a 'type'. Similarly, creating a menu or a homepage also necessitates the use of types.

[00:43] In Prismic, there are two main types, page types and custom types. Page types are templates for creating page models and come with default fields such as SEO and metadata fields. Custom types, on the other hand, don't include these default fields and provide flexibility for creating anything that isn't a traditional webpage, such as menus or settings pages.

[01:04] When creating a type, you can choose between 'Single' and 'Reusable'. Single types are used once for pages such as the homepage. In contrast, Reusable types can be used as many times as necessary to build pages like blogs, marketing pages, or product pages.

[01:19] But wait, there's more. Prismic also boasts a feature called 'Slices'. These bad boys are like Lego building blocks. They group related fields together to form sections of a website each corresponding to a component in your Next.js project. They can be mixed, matched and rearranged in the content editor to create unique pages, giving users like Mr. McDonald tools to design creative and customized content.

[01:41] An excellent example of a Slice could be a product detail or a video section as seen on our client La Bouche Rouge's website. Once a Slice is created or modeled, incorporating all necessary fields and design elements, it becomes a reusable component.

[01:54] This means it can be added to any page type or custom type, eliminating the need to recreate the same design elements repeatedly. This capability significantly saves time and effort, simplifying content creation and website design.

[02:07] With these tools, you can model virtually anything in Prismic.

Main takeaways

  • Page Types: Models for your documents. They are the place where you define and configure fields for your content.
  • Custom Types: These are models for anything that isn’t a web page. So menu, footers, settings document etc.
  • Slices: Building blocks for websites (like website components, but for content)

Answer to continue

Quiz banner

What is a Page Type?

What is a Slice?