Optimizely CMS SDK — Production-Ready Starter
Learn how to build a production-ready Next.js application with Optimizely SaaS CMS using the official @optimizely/cms-sdk and @optimizely/cms-cli. No boilerplate, no workarounds — just the right way to do it.
Get the Code — Clone and Start Building
This course is built around a fully working open-source starter. Everything is already wired up: CMS schema, caching, webhooks, preview, multi-language, and the SDK integration. Clone it once, follow the course, and you will understand every line.
Quick start
$ git clone
github.com/szymonuryga/
Optimizely-CMS-Content-SDK-Next.js-16
You have done this before. Now do it properly.
Most Optimizely projects end up with three separate things to maintain — GraphQL fragments, a block mapper, and a CMS schema. This starter collapses all three into one.
The old approach
- Define schema manually in the CMS UI
- Write a GraphQL fragment for each block
- Build a block mapper with switch/if chains
- Keep types, fragments, and mapper in sync by hand
- Hope nothing drifts when someone adds a field
With cms-sdk + cms-cli
- Define schema in code with contentType() — TypeScript types are generated automatically
- Push to CMS with npm run opti-push — one command, done
- OptimizelyComponent resolves the right component by type — no mapper needed
- Add a block: create one file, register it, push. That is it.
- Everything stays in sync because there is only one source of truth
Your project should only grow in one direction
When a project is set up well, adding a new block, page, or experience means creating one file in components/optimizely/ and running opti-push.
The middleware, the cache, the webhook handler, the locale routing, the preview mode — all of that is already there and never needs to change. The SDK takes care of the rest automatically.
components/optimizely/
block/
hero-block.tsx
services-block.tsx
my-new-block.tsx ✦
page/
CMSPage.tsx
LandingPage.tsx ✦
experience/
section/
✦ everything else handles itself
From zero to CMS-connected in 4 commands
Clone the starter, install, push your content types to the CMS, and start building. All blocks, pages, caching, webhooks, preview, and multi-language support are already wired up.
View on GitHub$ git clone github.com/szymonuryga/
Optimizely-CMS-Content-SDK-Next.js-16
$ npm install
$ npm run opti-push
$ npm run dev
Everything is already in place
This is not a skeleton. It is a complete, working application — you learn by reading and understanding it, then use it as the base for your own projects.
Cache + Revalidation
React 19 use cache with webhook-based on-demand invalidation. Header and footer use cache tags — no full-page purge needed.
Typed CMS Schemas
contentType() generates TypeScript props and the CMS schema at the same time. One definition, zero drift.
Multi-Language
Accept-Language negotiation, cookie persistence, locale-prefixed routing, and hreflang SEO — all handled by the middleware.
Preview Mode
In-context editing with communicationinjector.js. Configure a URL in the CMS, call getPreviewContent() — five minutes and done.
10 Lessons
Work through them at your own pace — no sign-up required.
Frequently Asked Questions
Ready to start?
No sign-up required — jump straight in.