--- title: Build Prismic websites with Next.js Cache Components description: A practical guide shows how to build Prismic-powered marketing websites using Next.js Cache Components, an experimental caching architecture. It walks through... canonical: https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build Prismic websites with Next.js Cache Components | daily.dev og:description: A practical guide shows how to build Prismic-powered marketing websites using Next.js Cache Components, an experimental caching architecture. It walks through... og:url: https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778 og:image: https://api.daily.dev/og/posts/meGHVs778.png og:image:alt: Build Prismic websites with Next.js Cache Components og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build Prismic websites with Next.js Cache Components **[Prismic](https://daily.dev/sources/Prismic)** · 13 min read · 0 upvotes · 0 comments ## Summary A practical guide shows how to build Prismic-powered marketing websites using Next.js Cache Components, an experimental caching architecture. It walks through project setup, creating page files with a shared fetchPage function using "use cache", cacheTag, and cacheLife, building slices, enabling draft previews via Draft Mode, and revalidating pages instantly through Prismic webhooks when content is published. The approach lets pages stay statically built while remaining previewable and quickly updatable, with dynamic per-request content (like personalized banners) streamed in via Suspense only where needed. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I set up content revalidation when a Prismic document is published in a Next.js app using Cache Components? Configure Prismic to fire a webhook on document publish or unpublish events, pointing it at a Next.js route handler that calls revalidatePrismicPages from @prismicio/next with the webhook's document IDs. This refreshes only the specific pages whose content changed rather than rebuilding the entire site, and requires a deployed site since Prismic calls the webhook at a public URL. _daily.dev surfaces practical patterns like this for developers wiring up CMS revalidation in Next.js._ ### How do content previews work with Next.js Cache Components and the use cache directive? Previews need no special caching code because Next.js Draft Mode bypasses use cache entirely when a preview session is active, so every cached function reruns on each request and editors always see the latest draft. Passing a preview ref returned by getPreviewRef from @prismicio/next into data-fetching functions makes draft and published content use separate cache keys. _developers wiring up CMS previews in Next.js can find implementation patterns like this on daily.dev._ ## Similar posts on daily.dev - [Cache components in Next.js: Faster pages with partial pre-rendering](https://daily.dev/posts/cache-components-in-next-js-faster-pages-with-partial-pre-rendering-xe8sns7u1) · LogRocket · 10 upvotes · 0 comments - [How Next.js Got Its Snappy Client Navs Back](https://daily.dev/posts/how-next-js-got-its-snappy-client-navs-back-unrgnqouf) · The New Stack · 0 upvotes · 0 comments - [From Years of Client Work to a Next.js \+ Sanity Starter Kit](https://daily.dev/posts/from-years-of-client-work-to-a-next-js-sanity-starter-kit-xsgebesso) · Codrops · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs), [#cms](https://daily.dev/tags/cms) [View this post on daily.dev](https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build Prismic websites with Next.js Cache Components","url":"https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778"},"datePublished":"2026-08-18T17:33:39.938Z","dateModified":"2026-09-13T19:20:11.258Z","description":"A practical guide shows how to build Prismic-powered marketing websites using Next.js Cache Components, an experimental caching architecture. It walks through...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd910ebc8424395924d2552ba7102621?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/cd910ebc8424395924d2552ba7102621?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Prismic","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Prismic","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/a561ec62494c4f45be5d3ce973bc65d5","url":"https://daily.dev/sources/Prismic"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,nextjs,cms","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Prismic","item":"https://daily.dev/sources/Prismic"},{"@type":"ListItem","position":3,"name":"Build Prismic websites with Next.js Cache Components"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/build-prismic-websites-with-next-js-cache-components-meghvs778#faq","mainEntity":[{"@type":"Question","name":"How do I set up content revalidation when a Prismic document is published in a Next.js app using Cache Components?","acceptedAnswer":{"@type":"Answer","text":"Configure Prismic to fire a webhook on document publish or unpublish events, pointing it at a Next.js route handler that calls revalidatePrismicPages from @prismicio/next with the webhook's document IDs. This refreshes only the specific pages whose content changed rather than rebuilding the entire site, and requires a deployed site since Prismic calls the webhook at a public URL. daily.dev surfaces practical patterns like this for developers wiring up CMS revalidation in Next.js."}},{"@type":"Question","name":"How do content previews work with Next.js Cache Components and the use cache directive?","acceptedAnswer":{"@type":"Answer","text":"Previews need no special caching code because Next.js Draft Mode bypasses use cache entirely when a preview session is active, so every cached function reruns on each request and editors always see the latest draft. Passing a preview ref returned by getPreviewRef from @prismicio/next into data-fetching functions makes draft and published content use separate cache keys. developers wiring up CMS previews in Next.js can find implementation patterns like this on daily.dev."}}]} ```