Slicify v4 — Prismic Try Out Project

Brought to you by the Prismic Solution Engineering Team.

A Next.js (App Router) + Prismic demo built with the current Prismic setup — a single prismic.config.json, the @prismicio/client / @prismicio/react / @prismicio/next packages, and the prismic CLI. There is no Slice Machine UI: you model content in the web Page Builder and sync it to code with the CLI.

Prerequisite: Node.js 20 or above — https://nodejs.org

Step 1. Install packages

cd slicify-v4-demo-template
npm install

Step 2. Start your local website

npm run dev

Your site runs at http://localhost:3000. (dev first runs a quick slice-usage analysis; use npm run dev:no-analysis to skip it.)

Step 3. Model content in the Page Builder

Open your repository and use the Page Builder to create and edit page types, custom types, slices, and documents:

https://slicify-v4-template.prismic.io

This replaces the old local Slice Machine app.

Step 4. Sync models between Prismic and your code

Local models live in ./customtypes (types) and ./slices (slices). The prismic CLI keeps them in sync with the repository — local is the source of truth for push:

npx prismic push        # push local types & slices to Prismic
npx prismic pull        # pull types & slices from Prismic into your code
npx prismic status      # show local vs remote differences
npx prismic gen types   # regenerate prismicio-types.d.ts from local models

Project structure

prismic.config.json      # repositoryName + slice libraries + route resolver
prismicio.ts             # Prismic client (routes, auto-previews, caching)
prismicio-types.d.ts     # generated TypeScript types
customtypes/             # custom types & page types
slices/                  # slice models + React components (marketing, blog)
app/
  [lang]/                # localized routing (home, blog, blog article, landing, search)
    lp/[uid]/            # landing pages by UID
    blog/[...articleSlug]/
  api/preview            # preview session handler
  api/exit-preview
  api/revalidate         # on-publish cache revalidation webhook
  slice-simulator/       # slice preview endpoint
  slice-library/         # internal slice catalog (dev tool)
  slice-usage/           # where each slice is used (dev tool)

Previews & the Slice Simulator

Both work out of the box (standard prismic init scaffolding):

• Page previews — <PrismicPreview> (in app/layout.tsx) + enableAutoPreviews (in prismicio.ts) + the /api/preview route. In the Page Builder, go to Settings → Previews and add a preview with your site's Domain and the route /api/preview (e.g. http://localhost:3000 for local). You do not need to paste the Prismic Toolbar <script> — <PrismicPreview> injects it.
• Slice Simulator — served at /slice-simulator. In the Page Builder, set the Slice Simulator URL to http://localhost:3000/slice-simulator to get the live editing experience while editing slices.

Environments

Prismic Environments are cloned repositories for safely testing model/content changes before production. No extra code is required — enableAutoPreviews reads the preview cookie and automatically serves content from whichever environment you preview from. Configure each environment's own Previews and Slice Simulator URL (usually pointed at http://localhost:3000) in that environment's settings. Keep prismic.config.json pointed at your production repository.

Deploying

On a live deployment, published content updates propagate via the revalidation webhook: production fetches are cached (force-cache, tag prismic), and /api/revalidate calls revalidateTag("prismic"). In the repository's Settings → Webhooks, add https://<your-domain>/api/revalidate triggered on publish/unpublish.

Docs

Prismic + Next.js documentation: https://prismic.io/docs/nextjs

Disclaimer

This project is made to test out Prismic. Slices used in this project are subject to the Tailwind UI license: https://tailwindui.com/license Images used in this project are from unsplash.com; see the Unsplash license: https://unsplash.com/license

---

This is a Next.js project. To learn more:

• Next.js Documentation — features and API.
• Prismic + Next.js — modelling and querying content.