The New Orange mark: a radial orange gradient on a dark square.New Orange CMS

Documentation

Frontend

Putting a Next.js site in front of the API: reading content, rendering Portable Text and images, caching, and previewing drafts.

  1. Putting a Next.js site in front of it

    Mount the API, mount the Studio, read content in a server component. The reference frontend in this repository is the worked example.

  2. Rendering Portable Text and images

    Server-render with @portabletext/react, pass your own schema types in as components, and classify every href before you emit an anchor.

  3. Caching and revalidation

    Every read carries the sync tags it depends on. Use them as cache tags and a publish purges exactly the pages that read the document.

  4. Previewing drafts

    A preview route enables draft mode and switches reads to the drafts perspective, so an editor sees unpublished work on the real site.