Built for enterprise teams that chose Contentful and need a production Next.js 16 foundation without burning a quarter on plumbing. Twelve content blocks across forty layouts. Live Preview wired end-to-end. Type-safe content models. Multi-language with auto slug-change redirects. ISR with tag-based revalidation. Hardened CSP. Delivered as source to your repository — no SaaS, no per-seat fees, no royalties. Saves 5–6 months of senior-engineer foundation work.
Linking between content types is manual. Refactoring a slug breaks 200 entries silently.
Vanilla Contentful makes you build it from scratch — locale fallbacks, partial translations, missing-key detection, and any kind of translation sync are left to you. Unless you pair the kit with Translately, our companion product that auto-translates entries on publish in ~4s.
Every URL change is an engineering ticket. SEO suffers. Marketing waits.
Forms get hardcoded into components. Marketing can't ship a campaign without a sprint.
Stringly-typed content access, runtime errors, and zero compile-time safety.
Pages live in a flat list. No parent/child relations, no breadcrumbs from the tree, no way to see how content actually connects.
Not a hero, a footer, and a README. A real foundation: design system, Live Preview, typed data layer, i18n, search, forms, analytics, security, and the docs to extend any of it.
Next.js 16 App Router on React 19, locale route groups, single-entry proxy.ts for redirects and rewrites.
Next.js 16 App Router on React 19 with route groups under app/[locale]/(marketing|sandbox|system) and experimental.rootParams + next/root-params feeding the locale into the layout tree. A single-entry proxy.ts (the Next 16 convention — no separate middleware.ts) handles CMS redirects, auto slug-change redirects, locale rewrites, default-locale URL hiding, and a multi-locale path map shared by sitemap, hreflang, and the language switcher.
One pnpm setup spins up the whole space — content types, locales, sidebar folders, demo content, ISR webhook.
pnpm setup (= pnpm cf:sync && pnpm cf:setup) introspects the live Contentful CDA schema, regenerates types/contentful/*, scaffolds new GraphQL fragments + React block components + blockMap entries for any unregistered block* content type, runs graphql-codegen, then spins up content types, en-US/de-DE locales, sidebar view folders (rlc- prefix, editors' own folders preserved), regex validations on every symbol field, demo assets, and a fully wired demo page — and registers the Contentful → /api/revalidate webhook against your deployed origin (managed name 'RLC — Next.js ISR revalidate', idempotent, env-scoped filter, loopback hosts rejected). The drift detector (pnpm cf:sync:check) hooks predev (warn) and prebuild (fail on CI), so stale GraphQL types never reach production. EU spaces work out of the box via CONTENTFUL_API_HOST=api.eu.contentful.com. cf:migrate, cf:seed, cf:reset, cf:generate-types, cf:codegen, and cf:export are separate commands. New environment in five minutes, not five days.
12 blocks across 40 layouts and 6 tones — every variant visually distinct, every CMS choice TypeScript-checked.
12 blocks (Hero, FeatureShowcase, FeatureGrid, StatsBand, LogoBar, Testimonial, FAQ, MediaShowcase, RichText, CallToAction, LeadCaptureForm, ContactInfo) across 40 layouts and 6 tones (default, muted, sunken, brand, accent, inverse) — every layout visually distinct on purpose. resolveBlockVariant() validates every CMS choice; an auto-regenerated blockMap means TypeScript catches every drift between code and CMS.
Editable header, mega-menu, and footer — restructure site nav from Contentful, no deploy required.
Multi-level header with mega-menu support and optional megaMenuImage per item, navigationMenu/Group/Item content types, and a footer that renders navigation groups, social links, and legal links — all editable in Contentful, no deploy needed to restructure the entire site nav.
Locale fallbacks, localized slugs, hreflang, CMS dictionaries — add a language in two file edits.
Multi-locale ready out of the box — the demo ships with two locales, but the architecture supports unlimited. Locale fallback chains baked into every CMS query, localized parent and child slugs, hreflang generation, default-locale URL hiding, and a CMS-driven localizedDictionary content type with {token} interpolation. Add a new locale in two file edits. Pair with Translately to auto-translate every CMS entry on publish — the included credit covers your whole site for 6+ months.
Auto sitemap, hreflang, JSON-LD, dynamic OG, /llms.txt and AI crawler policy — discoverable everywhere.
Per-page SEO and Open Graph fields, dynamic generateMetadata with canonical and language alternates, JSON-LD for Organization, WebSite + SearchAction, BreadcrumbList, WebPage and FAQPage, an auto sitemap.xml that walks every locale's localized slug, robots.ts, CMS-managed regex/wildcard redirects, and a /llms.txt route plus env-driven AI_CRAWLER_POLICY for GEO/AI SEO.
Compose forms in Contentful: generic submit endpoint, attachments, conditional routing, Resend, Zod, DOMPurify.
Compose forms in Contentful. Generic /api/forms/submit endpoint handles JSON and multipart with 25 MB attachments, conditional recipient routing per field option, Resend dispatch, HTML and plain-text bodies, React Hook Form + Zod on the client, and DOMPurify sanitisation server-side.
Algolia indexer over the full block graph + instant-search UI + dedicated /search page, lazy-loaded.
An Algolia indexer that walks the entire block graph, extracts plain text from rich-text content, builds breadcrumbs and per-locale records. Instant-search UI with debounce and keyboard navigation, dedicated /search page, lazy-loaded algoliasearch/lite, and the whole feature gracefully hides when env vars are missing.
Tracking-agnostic: Plausible first-party default, GTM/GA4 opt-in, CMS events, Vercel Web Vitals, Sentry.
Provider-agnostic event layer: editors set trackingEventName and trackingEnabled on pages, buttons, forms, and nav — one schema fans out via NEXT_PUBLIC_ANALYTICS_PROVIDERS. Default stack ships first-party Plausible (cloud or self-hosted via an optional Docker Compose recipe we document, not embed). GTM + GA4 load only when you list gtm and set siteSettings.gtmId. Vercel Web Analytics for Web Vitals, Sentry with sampling and session replay, structured logging with redaction.
Strict CSP, HSTS, Permissions-Policy, rate limiter, env validation, typed error handler, DOMPurify everywhere.
Strict CSP including Cookiebot/Sentry/GTM/Vercel/Contentful — plus a frame-ancestors carve-out for Live Preview — HSTS preload, Permissions-Policy, env validation via @t3-oss/env-nextjs, an IP rate limiter with proper headers, a typed error handler with ValidationError/UnauthorizedError/NotFoundError, and DOMPurify sanitisation everywhere user input enters.
Turbopack, AVIF/WebP, ISR with granular cache tags, polyfill stripper, codegen, Tailwind v4 — Lighthouse 100.
Turbopack dev and build, AVIF/WebP image pipeline with fetchPriority + quality + minimumCacheTTL, ISR via unstable_cache (60s tag) with webhook revalidateTag('contentful', 'max') plus granular tag fan-out (contentful:type:<id>, contentful:entry:<id>, contentful:locale:<code>) so a single FAQ edit no longer blows the whole CMS cache, scripts/strip-next-polyfills.mjs (prebuild + postinstall) that neutralises the legacy polyfill module for the kit's modern browserslist (Chrome ≥ 111, Safari ≥ 16.4) — a measurable Lighthouse 100 lever — pnpm cf:sync orchestrator + graphql-codegen for typed GraphQL operations, package-import optimisation, bundle analyzer, React Query provider scoped to the sandbox layout, Framer Motion, Swiper carousels, ESLint flat config, Tailwind v4, and a single consolidated docs/ARCHITECTURE.md reference (~750 lines, every layer with a numbered section).
Industrial-precise primitives, JetBrains Mono, semantic landmarks, Radix accordion/dialog — accessible by default.
Industrial-precise primitives (Section, SectionHeader, MediaFrame frame="technical" with corner ticks, KeyStat, Marker, MetaRow, FAQItem, ProseBlock, LogoMark) on JetBrains Mono via next/font, skip-to-main link, semantic landmarks, error boundary with fallback, 404 page, Radix accordion + dialog, and Cookiebot-ready consent — all accessible by default.
Measured on the deployed demo — a real marketing site with 12 blocks, navigation, fonts, analytics providers, Sentry, and Live Preview wired in.
The kit is built around the editor, not around the developer. Live Preview wired end-to-end, closed enums for layout and tone, sidebar folders that match the information architecture, and slug changes that auto-redirect themselves.
Inspector tags on every block, /api/draft and /api/disable-draft routes, LivePreviewProvider in the layout, an on-page preview banner, and a CSP frame-ancestors carve-out for app.contentful.com / app.eu.contentful.com. Editors see their changes inline, without a republish, without an iframe broken by the security headers.
Closed enums for layout and tone on every block — up to 24 valid compositions per block (4 layouts × 6 tones), every one visually distinct on purpose. Editors pick from a dropdown; nobody types hex colors, nobody invents a new layout in a CMS field.
Managed rlc- folders provisioned by pnpm cf:setup so the Contentful sidebar matches the site's information architecture out of the box. Editors' own (non-rlc-) folders are preserved on every re-run, so editor customisations and managed structure coexist.
Change a slug, hit publish — the auto-registered Contentful webhook calls /api/revalidate, which fires revalidateTag('contentful', 'max') plus path revalidation, then diffs the old and new snapshots and writes a redirect entry through the Management API. The proxy serves the redirect on the next request. Fresh content and SEO history preserved without an engineering ticket.
Industrial-precise design tokens, a typed REST + TanStack Query layer, ISR with proper cache discipline, codegen on every build, and a single-entry edge proxy.ts. The boring infrastructure that pays off in week one.
Carbon/Palantir tokens, JetBrains Mono, hairline elevation, sharp radii — 6 tones wired into every block.
Carbon/Palantir-inspired tokens — cobalt #1B4DE0 brand, slate neutrals, JetBrains Mono via next/font, hairline elevation, sharp 2-4px radii, a bg-grid utility, and frame-tick CAD-viewport corner ticks. 6 tones (default, muted, sunken, brand, accent, inverse) wired into every block. Documented in docs/ARCHITECTURE.md (#design-system).
Bearer apiFetch + Zod, query keys, SSR prefetch, optimistic updates — runnable Posts CRUD demo OOTB.
apiFetch with Bearer auth, AbortSignal, timeouts, and Zod parsing; a hierarchical query-keys factory; SSR prefetch + HydrationBoundary; optimistic updates with rollback; a runnable Posts CRUD demo at /[locale]/examples/posts inside the (sandbox) route group, with the QueryProvider scoped to that layout (not global, so the rest of the marketing tree stays SSG). Defaults to JSONPlaceholder so it runs OOTB; repoint to your own backend with one env var. The CMS itself uses a separate hybrid Contentful layer (REST CDA + GraphQL CDA + REST CMA) — see the Hybrid Contentful API section below. Documented in docs/ARCHITECTURE.md (#rest-api-and-tanstack-query).
60s revalidate, per-entry/type/locale tags — one FAQ edit invalidates one tag, not the whole site.
Production reads use unstable_cache with a 60s revalidate window. The auto-registered Contentful webhook (pnpm cf:setup against PRODUCTION_APP_URL — loopback hosts rejected) fires revalidateTag('contentful', 'max') plus per-scope tags: contentful:type:<contentTypeId>, contentful:entry:<id>, contentful:locale:<contentfulLocaleCode>. A single FAQ edit invalidates the FAQ entry tag and the FAQ type tag — not the whole CMS cache. Dev and Draft Mode bypass the cache so editors see changes on refresh — no restart, no stale loop.
Two codegens stay in sync — model drift becomes a build failure, not a production 500.
Two codegens stay in sync via pnpm cf:sync: cf-content-types-generator regenerates types/contentful/* (used by the REST SDK and CMA writes); graphql-codegen consumes a committed graphql/schema.graphql snapshot + every .graphql operation/fragment to emit graphql/generated/index.ts with TypedDocumentNode constants and per-operation Query/Variables types. The drift detector (pnpm cf:sync:check) hooks predev (warn) and prebuild (fail on CI) — model drift becomes a build failure, not a production 500.
/llms.txt + AI_CRAWLER_POLICY + FAQPage/WebPage JSON-LD — discoverable to humans and AI search.
A /llms.txt route (cached 1h, listing site settings, the path map, and the sitemap link), env-driven AI_CRAWLER_POLICY (open or restricted), FAQPage and WebPage JSON-LD, OG siteName and url, and a sitemap that walks every locale's localized slug. Ship discoverable to humans, AI search, and traditional crawlers without a separate SEO project.
One file owns every URL: CMS redirects, auto slug-change redirects, locale rewrites, hreflang path map.
A single-entry proxy.ts (the Next 16 convention — no separate middleware.ts) handles CMS-managed regex/wildcard redirects, auto slug-change redirects written by the revalidate webhook, locale rewrites, default-locale URL hiding, and a multi-locale path map shared by sitemap, hreflang, and the language switcher. One file owns every URL the user ever sees.
No exotic infra. Next.js on Vercel, Contentful as the source of truth, edge middleware for routing and redirects, Live Preview for the editor.
Two transports, one fetcher. Each call uses the API that wins on payload, round-trips, and bundle — instead of pretending one of them fits everything.
GraphQL is server-only — TanStack Query (REST) is the only client.
GraphQL PageIndex + parent walk — was N round-trips on cold cache.
Granular tag fan-out — was the entire CMS cache going cold.
Each card is a real call site in lib/cms/. Before is REST-only baseline; after is what this kit ships.
Full page tree on every uncached request — paginated through hundreds of entries.
GraphQL PageIndex returns only { id, slug, parentId } and walks the parent chain in memory.
Per-locale retry loop — one round-trip per attempted locale on cold cache.
GraphQL with useFallbackLocale: true — Contentful walks the chain server-side.
Webhook fires one global revalidateTag — every cached CMS page goes cold.
Webhook fires per-type, per-entry, per-locale tags based on the payload.
REST getEntry with include: 10 — deep graph, reference-resolver strips cycles.
Same — REST stays. Hand-authoring an equivalent GraphQL selection is brittle.
REST CMA + contentful-migration — no GraphQL alternative for CMA.
Same — REST CMA stays. Server-/CI-only, never reaches the browser.
Hand-rolled fetch per call site, ad-hoc auth, no caching.
Typed apiFetch (Bearer + Zod) + TanStack Query — SSR prefetch + optimistic updates.
REST SDK types stop at response boundary; entry.fields.X is unknown.
Two codegens stay in sync via pnpm cf:sync — REST types + TypedDocumentNode operations.
GraphQL-only ships Apollo/urql/Relay — 30–80 KB+ gzip on every page.
GraphQL is server-only; browser keeps TanStack Query (REST) for external CRUD.
Over-fetched include trees + per-locale retry loops + global invalidation = many calls per render.
Slim GraphQL on hot paths + server-side fallback + scoped tags = far fewer origin hits.
Every CMS read — REST or GraphQL — runs through one cmsFetch wrapper. Same retry, same cache, same tag fan-out.
Locale-scoped routes, hreflang, fallbacks and CMS dictionaries are in the box. For the actual translation of every Contentful entry on publish — no plugins, no exports, no manual workflow — pair the kit with Translately, our companion product. Webhook in, translated entries back in Contentful in ~4 seconds.
Save in Contentful. Translately picks up the change, translates into every active locale, and writes the result back to the same entry — no plugins, no UI to manage.
Typical entry is translated and written back in roughly four seconds. Bulk-translate your existing space in one click for the initial backfill.
$0.075 per 1,000 characters at launch pricing, locked for 12 months from sign-up. AES-256-GCM credential encryption, GDPR-ready, EU region support, content never persisted.
€1,500 of Translately credit included.
Roughly 21 million characters at launch pricing. Enough to translate a 200-page site into 10 languages and run 6+ months of on-publish auto-sync — without ever topping up.
Every row is a SaaS bill or a one-off project most marketing sites end up paying for. The kit ships them on day one, in your repo, under your license.
| What you'd otherwise pay for | Typical cost | What the kit ships |
|---|---|---|
| Builder.io / Storyblok Visual Editor | $500–4,000 / mo | Typed page-block engine: 12 blocks · 40 layouts · 6 tones, every layout visually distinct |
| Algolia / Coveo / Elastic Site Search | from ~$500 / mo at scale | Algolia indexer over the full block graph + instant-search UI + /search page |
| HubSpot Forms / Formspree | $45–800 / mo | Schema-driven blockForm + /api/forms/submit with attachments + conditional routing |
| Cookiebot / OneTrust | €10–80k / yr enterprise tier | Cookiebot-ready strict CSP and consent banner shipped |
| Lokalise / Phrase / Crowdin Pages + manual translation workflow | from ~$200 / mo + integration + per-language fees | Localized routing, hreflang, fallbacks, CMS dictionaries, and auto slug-change redirects shipped — plus €1,500 of Translately credit for on-publish auto-translation (Translately is our companion product, $0.075 per 1,000 characters at launch pricing) |
| Datadog RUM / LogRocket | from ~$15 / host / mo | Web Vitals RUM + Sentry with sampling, replay, and noise filtering |
| Redirection.io | €100–500 / mo | CMS-managed redirect content type evaluated in middleware |
| Segment Protocols / mParticle | thousands / mo | CMS trackingEventName fields + provider registry (Plausible default, GTM opt-in) |
| Security audit + CSP/sanitisation hardening | €5–15k one-off | Strict CSP, HSTS, rate limiter, env validation, DOMPurify shipped |
| SEO agency setup (sitemap, hreflang, JSON-LD, OG) | €5–20k one-off | Auto sitemap, hreflang, BreadcrumbList + Organization + WebSite + WebPage + FAQPage JSON-LD, dynamic OG, /llms.txt + AI crawler policy for GEO |
| Visual on-page editing (Builder.io / Storyblok / Sanity Studio inline) | $500–3,000 / mo | Contentful Live Preview shipped — inspector tags on every block, /api/draft + /api/disable-draft routes, on-page preview banner, CSP frame-ancestors carve-out |
| Typed REST client + TanStack Query setup (1–2 weeks of senior work) | €8–20k one-off | Bearer-auth apiFetch + Zod + hierarchical query keys + SSR prefetch + HydrationBoundary + optimistic-update CRUD demo, ready to repoint to your backend |
€150–250k of build cost + first-year SaaS that the kit lets you skip — replaced by one one-time license fee.
The foundation is fixed, so the price is fixed. Anything bespoke gets its own line item before we start — never a 'we'll see' invoice.
Yes. Source delivered to your repo under your license. No SaaS, no per-seat fees, no royalties.
Yes. The audit puts the from-scratch build at 21–25 engineer-weeks (5–6 months for one senior, ~3 months for a 2-person squad) — compressed into a 1-week kickoff. The math is on the savings card above.
Next.js 16.0 App Router on React 19 with Turbopack dev/build today. ISR via unstable_cache (60s tag) with webhook revalidateTag('contentful', 'max'). We track Next.js LTS and ship a free patch update within 30 days of each major.
Tested against Contentful's current Delivery API (REST + GraphQL) and Content Management API. The kit uses each API for what it's best at — REST CDA SDK for include-graph reads (pages, dictionaries, redirects), GraphQL CDA for the render hot path (path resolution, site settings, future block fragments — see the Hybrid Contentful API section below), REST CMA for migrations, slug-redirect sync, and asset uploads. One-command provisioning (pnpm setup = cf:sync + cf:setup) introspects the schema, regenerates REST + GraphQL types, scaffolds new block fragments + components + blockMap entries, and runs graphql-codegen. Sidebar view folders, regex validations on every symbol field, EU host support (CONTENTFUL_API_HOST=api.eu.contentful.com), Live Preview, and the auto-registered ISR webhook (managed name, idempotent, env-scoped filter, loopback rejected) all ship out of the box.
Yes. That's the point. It's not a black box. Standard Next.js + Contentful + TypeScript with a domain-organized lib (lib/{cms,i18n,seo,api,analytics,email,security,theme,utils} behind @/cms/*, @/i18n/* path aliases). If your team can ship Next.js, they can extend this — the consolidated docs/ARCHITECTURE.md reference walks every layer with a numbered section (mental model, project layout, locales/proxy, content model, blocks, design system, REST + TanStack, hooks, lib reference, route handlers, SEO, analytics, forms, security, build/perf, env), plus a top-level README with the 3-step quickstart and a fully commented .env.example.
Yes. The starter ships with locale routing as the primary axis; tenant routing follows the same pattern through the proxy.ts middleware.
Skip-to-main link, semantic landmarks, focus styles, error boundary, and Radix-based primitives by default. Doesn't replace a real audit, but it gets you to WCAG 2.2 AA on a clean install.
There isn't one — you own the code. An optional retainer is available if you want one of mine.
Yes — the live public demo is at enterprise-demo-puce.vercel.app (Northwind Industries, every block, both locales, Live Preview wired). Want a private 1-hour walkthrough on the same space? Book a call.
Because the foundation is fixed and the customizations aren't. Both get a number before we start — just two different numbers.
Typical boilerplates ship a hero, a footer, and a README. This ships 12 blocks across 40 layouts and 6 tones, an industrial-precise design system, Contentful Live Preview, a typed REST + TanStack Query layer, an ISR cache pipeline, an i18n routing layer with auto slug-change redirects, a search indexer, a forms backend, an analytics tracking layer, GEO/AI SEO, and an enterprise security posture. The audit puts the from-scratch build at €105–175k of engineering cost alone, before SaaS.
No. Every optional integration (search, transactional email, error tracking, analytics providers) is gated by env vars and fails open. Ship without them today, add them later by setting two or three variables. Analytics defaults to first-party Plausible when NEXT_PUBLIC_PLAUSIBLE_DOMAIN is set; GTM is opt-in.
Cookiebot-ready CSP and a consent banner ship out of the box. Swap to OneTrust or an in-house CMP by changing one URL in the script tag and the connect-src CSP entry.
€1,500 buys ~21M characters at launch pricing. That's a 150-page site translated into 10 languages with 6+ months of weekly publishing on top, or a 200-page site into 6 languages with the same runway. After the credit runs out, Translately is pay-per-use at $0.075 per 1,000 characters — no subscription, locked for 12 months from sign-up. (Translately is our companion product for auto-translating Contentful on publish — translately.app.)
Yes — inspector tags on every block, /api/draft and /api/disable-draft routes, a LivePreviewProvider in the layout, an on-page preview banner, an isLivePreviewConfigured() env helper that gracefully disables the provider when the Preview token / secret are missing, and a CSP frame-ancestors carve-out for app.contentful.com / app.eu.contentful.com so the preview iframe is not blocked. Documented in docs/ARCHITECTURE.md (#live-preview). See it running at enterprise-demo-puce.vercel.app.
The kit ships a typed REST + TanStack Query layer for your external business backends — kept distinct from the CMS. apiFetch with Bearer auth, AbortSignal, timeouts, and Zod parsing; a hierarchical query-keys factory; SSR prefetch with HydrationBoundary; optimistic updates with rollback. A runnable Posts CRUD demo lives at /[locale]/examples/posts inside the (sandbox) route group, with the QueryProvider scoped to that layout (not global, so the marketing tree stays SSG). Defaults to JSONPlaceholder so it works OOTB; repoint to your own API by overriding NEXT_PUBLIC_API_BASE_URL. CMS reads stay on the hybrid Contentful layer (REST CDA + GraphQL CDA + REST CMA — see the Hybrid Contentful API section below). Documented in docs/ARCHITECTURE.md (#rest-api-and-tanstack-query).
The kit ships a /llms.txt route (cached 1h, listing site settings, the path map, and the sitemap link), an env-driven AI_CRAWLER_POLICY (open or restricted) wired into robots.ts, FAQPage and WebPage JSON-LD, and OG siteName/url. Set AI_CRAWLER_POLICY=restricted to block common AI training and browse bots; default is open.
Yes. Twelve monthly installments of €2,917 at 0 % interest, total unchanged at €35,000 ex VAT. Available to EU companies after a brief CVR / VAT-ID credit check; first installment due on kickoff start, the rest billed monthly via Stripe or bank transfer. Source code is delivered at kickoff — the license is granted under a signed payment-plan addendum to the master agreement and is revertible if payments lapse more than 30 days, with a 14-day cure period. That clause is what makes interest-free internal financing safe at this ticket size; it is the only material difference from the one-time deal. Customizations and integrations beyond the kit stay on standard milestone billing — only the €35,000 starter license is financed. Prefer one-time? Same price, same scope.
Tracking is provider-agnostic. The kit defaults to first-party Plausible (privacy-first page views and CMS-defined custom events). Self-host Plausible with a documented Docker Compose recipe we ship with the kit — we do not embed Plausible source (AGPL). Add GTM/GA4 for ad-tech-heavy clients via env and a gtmId in Contentful site settings. Vercel Web Analytics covers Web Vitals on Vercel. The live demo at enterprise-demo-puce.vercel.app still runs GTM for the Northwind showcase; your fork picks the stack.
Walkthrough on a real demo space, or get the price on email. No slide deck either way.