Optimizely SaaS CMS + Next.js 15 is a free, MIT-licensed starter boilerplate that wires an Optimizely SaaS CMS instance to a Next.js 15 App Router front end through Optimizely Graph, giving developers routing, preview, content fetching and cache revalidation out of the box.
What is Optimizely SaaS CMS + Next.js 15?
It is a GitHub starter repository maintained by developer Szymon Uryga that fetches content from Optimizely SaaS CMS via the Optimizely Graph API and renders it as statically generated Next.js 15 pages. Input is your CMS content plus a Content Graph API key and five other environment variables; output is a typed, statically generated website with preview, routing and webhook-driven revalidation already implemented. It runs on Node.js 18.17 or later and was built alongside a free step-by-step course hosted at opti-masterclass.vercel.app. The repo ships an ExportedFile.episerverdata file containing the initial CMS content for import.
Key Features
- Next.js 15 App Router — the entire front end is built on the App Router, with routing logic driven by the CMS page hierarchy.
- Static Site Generation — pages are pre-rendered at build time rather than server-rendered per request.
- On-Demand Cache Revalidation — webhooks refresh cached content in real time, authenticated by the
OPTIMIZELY_REVALIDATE_SECRETvariable. - Draft Mode previews — unpublished content can be previewed using a preview secret generated from Optimizely AppKey and AppSecret credentials.
- Multi-language support — automatic language detection backs localized sites; the docs include a dedicated multi-language guide.
- Block Factory Mapper — a documented pattern for mapping CMS content blocks to React components for dynamic rendering.
- Visual Builder integration — Optimizely's on-page editing UI is wired into the front end so editors can compose pages visually.
- Tailwind CSS and shadcn/ui — styling and UI primitives ship preconfigured, with TypeScript and GraphQL Codegen types generated via
npm run gen-typesfor type-safe Graph API calls.
Who should use the Optimizely SaaS CMS + Next.js 15 template?
- Optimizely developers starting a new headless build who want Graph querying, preview and revalidation already solved instead of writing them from scratch.
- Agencies and consultancies needing a reusable baseline they can restyle per client, since the bundled design is deliberately simple and treated as an example.
- Learners following the Opti Masterclass course who want the finished code alongside the step-by-step lessons.
- Teams evaluating Optimizely SaaS CMS who need a working Next.js reference before committing to the platform.
How does the template work?
Clone the repository, run npm install, then create a .env file with six variables: OPTIMIZELY_API_URL, OPTIMIZELY_SINGLE_KEY, OPTIMIZELY_PREVIEW_SECRET, OPTIMIZELY_REVALIDATE_SECRET, OPTIMIZELY_START_PAGE_URL and NEXT_PUBLIC_CMS_URL. Run npm run gen-types to generate the GraphQL SDK, then npm run dev and open localhost on port 3000. Starter content is loaded through Admin, Tools, Import Data using the bundled ExportedFile.episerverdata file — add Polish as a language in CMS settings first, or the import fails.
What can you do with the Optimizely SaaS CMS + Next.js 15 template?
- Launch a localized marketing site: connect your CMS key, import the sample content, and serve statically generated pages in multiple languages with automatic language detection.
- Build a component-driven CMS front end: register each Optimizely content block in the Block Factory Mapper so editors can assemble pages in Visual Builder.
- Preview unpublished edits: enable Draft Mode so editors review content changes on the live Next.js front end before publishing.
- Keep pages fresh without full rebuilds: configure the revalidation webhook so publishing in Optimizely purges only the affected cached routes.
FAQ
Is this template free?
Yes. It is released under the MIT license. You still need an Optimizely SaaS CMS instance and a Content Graph API key, which require contacting Optimizely for CMS access — the template cannot render content without them.
Does it work without an Optimizely SaaS CMS instance?
No. Every page's content comes from Optimizely Graph. Without valid API credentials and CMS content the front end has nothing to render, which is why the README directs users to the Optimizely team for CMS access.
Why does the import require Polish language?
The bundled ExportedFile.episerverdata content was authored with a Polish language branch, so the README instructs you to add Polish under CMS settings before running Admin, Tools, Import Data, otherwise the import fails.
What is OPTIMIZELY_START_PAGE_URL for?
Optimizely does not assign the root path to the Start Page when using hierarchical routing, so the Start Page has an explicit URL such as /start-page. This variable must be set manually because it affects both routing logic and cache revalidation.
What documentation ships with the repository?
Seven markdown guides cover project setup, Block Factory Mapper, fetching data from Optimizely Graph, cache revalidation with webhooks, Visual Builder, draft mode and multi-language support — all linked from a docs folder in the repository.
