Prismic Slices in Next.js: A Page Builder Editors Can Use
We've set up Prismic as a page builder on Wondermind and Zeal. Both teams wanted the same thing: publish new pages without waiting for a developer, and keep the design intact.
The code is the easy part. Here's the code, then the decisions that matter more.
The core of a Prismic page in Next.js
Prismic calls reusable sections slices. A page is a list of them, and SliceZone renders each one with its React component. This is the App Router pattern from the Prismic docs.
import { SliceZone } from "@prismicio/react";
import { createClient } from "@/prismicio";
import { components } from "@/slices";
export default async function Page({ params }: PageProps<"/[uid]">) {
const { uid } = await params;
const client = createClient();
const page = await client.getByUID("page", uid);
return <SliceZone slices={page.data.slices} components={components} />;
}
export async function generateStaticParams() {
const client = createClient();
const pages = await client.getAllByType("page");
return pages.map((page) => ({ uid: page.uid }));
}Running prismic init creates the client, the slice simulator for live previews, the preview routes and a revalidation route. Register that revalidation route as a webhook, so publishing in Prismic clears the Next.js cache and pages update without a deploy.
Model sections, not pages
The most common mistake is one custom type for each page design. Six months later you have twelve templates and a developer is still needed for every new layout.
Build a page from sections instead. Look at the Figma file and list every distinct block: hero, text with image, logo row, testimonial, call to action. Each becomes a slice.
Give editors fewer choices
A page builder fails when it offers too much. If editors can set any colour, spacing and font size, the design drifts within months.
- Use variations for real design options, not free-form settings
- Limit colours and backgrounds to named choices from the design system
- Name fields in the editor's language, not the developer's
- Write a short hint on any field where the rule isn't obvious
Document slices alongside your components
On Zeal we built a component library in Storybook before connecting Prismic. Every slice mapped to a documented component, so new pages followed the same design system without being built from scratch.
Get motion and editing to work together
Wondermind relied on rich motion with GSAP and React Spring. Animated sections have to work wherever an editor places them, so each slice should own its animation and never assume what sits above or below it.
The test of a good setup
Ask an editor to build a new landing page alone. If they finish without asking you anything, and it looks right, the model works.