08
Use Next.js + Neos as a headless CMS with full visual editing
Zebra is a set of packages for Next.js and Neos CMS to create content heavy pages, dynamic apps or anything in-between. The developer experience of Next.js as a modern full stack framework is combined with the superior editing experience of Neos CMS.
A shift in how we build websites, shops and apps
Zebra is already used in production level projects and works with the newest features in Next.js: App Router with React Server Components. It makes a great foundation for building highly dynamic web experiences. This is also what powers our newest demo: a fully integrated headless commerce solution with rich product content editable in Neos.
Zebra brings the great editing experience that Neos is known for into the headless world. Make anything in the frontend editable and back it up with strong content structures in Neos.
You don't have to choose between good content editing or a focus on dynamic app logic. With Zebra you can have fully-editable pages for content heavy parts and mix that with all the possibilities for dynamic app logic that Next.js provides.
With Next.js it is really easy to make your frontend a hub that integrates many different services. From headless commerce, PIM, CRM, authentication to personalization.
See Zebra + headless commerce
in action
in action
You can create your very own demo instance to check out Zebra with a working headless commerce integration (using Shopify) in action. See how easy it can be to provide rich content for products in combination with a great editing experience.
Getting started
Zebra is a set of open-source NPM and Composer packages for Next.js and Neos CMS that you can integrate in existing applications or use to kickstart a new project.
1.
Checkout the Zebra demo project on GitHub to see how everything works together in a running setup. This is also a good boilerplate for a new project.
2.
Have a look at the Zebra package readme to learn more about the details and the steps to integrate Zebra into an existing project.
It takes a few parts to make a zebra
Zebra integrates Next.js and Neos CMS in a flexible and extensible way. This is achieved by using a few packages that work together to create a seamless content rendering and editing experience.
Zebra package
It provides the Next.js integration with helpers to fetch content and components to render editable content. It supports app router with React Server Components and also pages router for older projects.
import { ContextProps } from '@networkteam/zebra';
import { ContentComponent, withNode } from '@networkteam/zebra/server';
import Code from 'lib/components/ui/Teaser';
const ContentTeaser = async ({ ctx }: { ctx: ContextProps }) => {
const node = await withNode(ctx)
return (
<ContentComponent ctx={ctx}>
<Teaser
title={<Editable ctx={ctx} property="title" />}
image={node.properties.image}
>
<ContentCollection ctx={ctx} nodeName="content" />
</Teaser>
</ContentComponent>
)
}
export default ContentCode;
Content API package
This adds a simple and flexible content API to Neos. It can be extended via Fusion and exposes documents, content and custom metadata for rendering in Next.js.
prototype(Zebra.Site:Document.Page.Api) < prototype(Networkteam.Neos.ContentApi:DefaultDocument) {
meta {
isRootPage = ${documentNode == site}
mainNavigation = Networkteam.Neos.ContentApi:MenuItems {
maximumLevels = 1
}
}
site = Networkteam.Neos.ContentApi:BaseNode {
@context.node = ${site}
}
# Render node with children recursively
node = Networkteam.Neos.ContentApi:RecursiveNode
}
Next integration for Neos package
There are a few special tricks to make editing with preview rendering of content and revalidation of cached content in Next.js work seamlessly. This package for Neos brings a configurable revalidation logic.
Networkteam:
Neos:
Next:
sites:
_default:
nextBaseUrl: 'http://localhost:3000/'
revalidate:
uri: 'http://localhost:3000/api/revalidate/'
token: 'a-secret-token'
Need help from the Zebra experts?
While working on production level projects and supporting other teams we learned a trick or two on how to build custom integrations with Zebra for many use-cases. We are happy to offer you professional support and guiding you to kickstart your Zebra project.