Optimizely SaaS CMS - Next.js Integration

[!TIP]
Looking to implement a new Next.js based site with Optimizely SaaS CMS? The easiest way to get started is our project template.
This package provides the needed components to implement a Next.js based frontedn for Optimizely SaaS CMS, with full support for the preview capabilities of Optimizely CMS.
Release notes
Features
Catch-all route rendering
Default implementation of the Catch-All route in Next.js to allow rendering any page created and managed by editors.
import { CmsPage as OptimizelyCmsPage } from "@remkoj/optimizely-cms-nextjs"
import getFactory from '@/components/factory'
import { getContentByPath } from "@/gql/functions"
const { CmsPage, generateMetadata, generateStaticParams } = OptimizelyCmsPage.createPage(getFactory(), {
getContentByPath: getContentByPath
})
export const dynamic = "error";
export const dynamicParams = true;
export const revalidate = false;
export const fetchCache = "default-cache";
export {
generateMetadata,
generateStaticParams
}
export default CmsPage
The createPage
method has many more options allowing you to take control over what is happening while the page renders. The options object has built-in documentation that your IDE can show if you've got JavaScript / TypeScript language support enabled.
Cache invalidation
Default implementation to handle webhooks from Optimizely Graph to purge the Next.js cache based upon taht incoming request.
import createPublishApi from '@remkoj/optimizely-cms-nextjs/publish'
const publishApi = createPublishApi(
{
paths: [ '/', '/[[...path]]', '/sitemap.xml' ]
optimizePublish: true
}
)
export const dynamic = 'force-dynamic'
export const dynamicParams = true
export const revalidate = 0
export const fetchCache = 'force-no-store'
export const runtime = 'edge'
export const GET = publishApi
export const POST = publishApi
The createPublishApi
method has many more options allowing you to take control over what is happening while the page renders. The options object has built-in documentation that your IDE can show if you've got JavaScript / TypeScript language support enabled.
Middleware
The package provides the following enhancements for Next.js middleware:
withEditFallback | @remkoj/optimizely-cms-nextjs/preview | Rewrite incoming Optimizely CMS 12 preview / on-page-edit URLs to Optimizely SaaS CMS preview URLs |
withLanguagePrefix | @remkoj/optimizely-cms-nextjs/page | Handle the redirect of the homepage / to the locale that best matches the incoming request, such as /en . The locales and their URLs are taken from the second parameter - the ChannelDefinition. |
If you use both wrappers, the withEditFallback
wrapper must wrap the withLanguagePrefix
wrapper, to ensure that the edit mode URL is rewritten before the language prefix is applied.