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.

Run a demo

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.

Awesome inline editing

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.

App or content? You can have both.

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.

Integrate all the services

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.

08

Zebra: A preview of Next.js 13 App Router and React Server Components

The new capabilities of Next.js 13 will make sites and apps with Zebra and Neos CMS even more powerful.

06

Zebra: Full editing with Neos and Next.js

Can we have it all? The editing experience of Neos paired with the frontend workflow of Next.js?

See Zebra + headless commerce
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.

Create your own demo instance

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.

 

https://github.com/networkteam/zebra 

ContentTeaser.tsx
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.

 

https://github.com/networkteam/Networkteam.Neos.ContentApi 

Api.fusion
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.

 

https://github.com/networkteam/Networkteam.Neos.Next 

Settings.Next.yaml
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.

Get in contact